正阳县网站建设,新冠三阳最新消息,wordpress修改成中文,wordpress主题订单系统一、Markdown基础知识
1.1 什么是Markdown
Markdown是一种轻量级标记语言#xff0c;使用纯文本格式编写文档。【优点】#xff1a;
✓ 纯文本#xff0c;兼容性好
✓ 语法简单#xff0c;易学易用
✓ 专注内容#xff0c;不被格式干扰
✓ 版本控制友好#xff08;Git等…一、Markdown基础知识1.1 什么是MarkdownMarkdown是一种轻量级标记语言使用纯文本格式编写文档。 【优点】 ✓ 纯文本兼容性好 ✓ 语法简单易学易用 ✓ 专注内容不被格式干扰 ✓ 版本控制友好Git等 【缺点】 ✗ 格式能力有限如颜色、字体 ✗ 不同渲染器支持程度不同 ✗ 复杂排版需要借助HTML1.2 重要提醒⚠️ Markdown原生不支持文字颜色 要实现颜色效果需要 1. 使用HTML标签推荐 2. 使用特定平台的扩展语法 3. 某些Markdown编辑器的私有语法 本文档会详细介绍所有可行方法。二、基础语法2.1 标题Headings语法使用#号数量代表级别# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题效果一级标题二级标题三级标题四级标题五级标题六级标题注意事项#号后面要加空格最多支持6级标题建议标题前后空一行2.2 段落和换行段落这是第一段。 这是第二段中间空一行。效果这是第一段。这是第二段中间空一行。换行方法1行末加两个空格 然后换行 方法2使用br标签 这是第一行br这是第二行 方法3使用br/标签 这是第一行br/这是第二行效果方法1行末加两个空格然后换行方法2使用标签这是第一行这是第二行2.3 文字格式化2.3.1 加粗Bold语法使用**或__包围**这是加粗文字** __这也是加粗文字__效果这是加粗文字这也是加粗文字2.3.2 斜体Italic语法使用*或_包围*这是斜体文字* _这也是斜体文字_效果这是斜体文字这也是斜体文字2.3.3 加粗斜体语法使用***或___包围***这是加粗斜体文字*** ___这也是加粗斜体文字___效果这是加粗斜体文字这也是加粗斜体文字2.3.4 删除线Strikethrough语法使用~~包围~~这是删除线文字~~效果这是删除线文字2.3.5 下划线Underline语法Markdown原生不支持需要使用HTMLu这是下划线文字/u效果这是下划线文字2.3.6 高亮Highlight语法使用包围部分渲染器支持这是高亮文字效果如果不支持会显示为普通文字这是高亮文字备用方案使用HTMLmark这是高亮文字/mark效果这是高亮文字2.3.7 上标和下标语法使用HTML标签Hsub2/subO水的化学式 Xsup2/supX的平方效果H2O水的化学式X2X的平方三、文字颜色重点3.1 核心问题❌ Markdown原生语法不支持文字颜色 原因 Markdown设计理念是内容与格式分离 专注于文档结构不关注视觉样式 但可以通过以下方法实现颜色 ✓ HTML标签最通用 ✓ 平台特定语法如某些博客平台 ✓ 内联CSS样式3.2 方法1HTMLfont标签简单但已废弃语法font colorred这是红色文字/font font colorblue这是蓝色文字/font font colorgreen这是绿色文字/font font color#FF5733这是橙色文字十六进制/font效果这是红色文字这是蓝色文字这是绿色文字这是橙色文字十六进制注意⚠️font标签在HTML5中已废弃但大部分Markdown渲染器仍支持不推荐在正式项目中使用3.3 方法2HTMLspan标签 style推荐语法span stylecolor: red;这是红色文字/span span stylecolor: blue;这是蓝色文字/span span stylecolor: green;这是绿色文字/span span stylecolor: #FF5733;这是橙色文字/span !-- 带背景色 -- span stylecolor: white; background-color: red;白字红底/span span stylecolor: black; background-color: yellow;黑字黄底/span !-- 多种样式组合 -- span stylecolor: red; font-weight: bold; font-size: 20px;红色加粗大号字/span效果这是红色文字这是蓝色文字这是绿色文字这是橙色文字白字红底黑字黄底红色加粗大号字常用颜色代码颜色名英文名十六进制RGB红色red#FF0000rgb(255, 0, 0)绿色green#00FF00rgb(0, 255, 0)蓝色blue#0000FFrgb(0, 0, 255)黄色yellow#FFFF00rgb(255, 255, 0)橙色orange#FFA500rgb(255, 165, 0)紫色purple#800080rgb(128, 0, 128)灰色gray#808080rgb(128, 128, 128)黑色black#000000rgb(0, 0, 0)白色white#FFFFFFrgb(255, 255, 255)3.4 方法3使用Emoji替代颜色创意方法语法 红色重要提示 绿色成功信息 黄色警告信息 蓝色普通信息 ⚫ 黑色严重问题 ⚪ 白色次要信息 ✅ 成功 ❌ 失败 ⚠️ 警告 热门 ⭐ 重要 提示效果 红色重要提示 绿色成功信息 黄色警告信息 蓝色普通信息⚫ 黑色严重问题⚪ 白色次要信息✅ 成功❌ 失败⚠️ 警告 热门⭐ 重要 提示3.5 方法4代码块彩色输出特殊场景语法使用diff语法高亮diff 这是绿色文字添加 - 这是红色文字删除 ! 这是橙色文字警告 # 这是灰色文字注释 效果 这是绿色文字添加 - 这是红色文字删除 ! 这是橙色文字警告 # 这是灰色文字注释四、列表4.1 无序列表Unordered List语法使用-、*或- 项目1 - 项目2 - 项目3 - 子项目1缩进2空格或1个Tab - 子项目2 - 子子项目1 * 也可以用星号 也可以用加号效果项目1项目2项目3子项目1子项目2子子项目14.2 有序列表Ordered List语法使用数字 .1. 第一项 2. 第二项 3. 第三项 1. 子项1缩进3空格 2. 子项2 4. 第四项效果第一项第二项第三项子项1子项2第四项4.3 任务列表Task List语法使用- [ ]和- [x]- [ ] 未完成任务 - [x] 已完成任务 - [ ] 待办事项1 - [x] 已完成事项1 - [ ] 子任务1 - [x] 子任务2效果未完成任务已完成任务待办事项1已完成事项1子任务1子任务2五、链接和图片5.1 链接Links基本语法[链接文字](URL) 示例 [百度](https://www.baidu.com) [Google](https://www.google.com)效果百度Google带标题的链接[链接文字](URL 鼠标悬停显示的标题) 示例 [百度](https://www.baidu.com 点击访问百度)效果百度引用式链接这是一个[链接][id] [id]: https://www.baidu.com 百度效果这是一个链接自动链接https://www.baidu.com exampleemail.com效果https://www.baidu.comexampleemail.com5.2 图片Images基本语法 示例 带标题的图片示例![]失https://v败a.pla能有防盗链机制,建议将图片保存下来直接上传(https://www.baidu.com)**使用HTML调整图片大小** markdown img srchttps://via.placeholder.com/150 width100 height100 img srchttps://via.placeholder.com/150 width50%六、代码6.1 行内代码Inline Code语法使用反引号使用 console.log() 打印日志效果使用console.log()打印日志6.2 代码块Code Block语法1缩进4个空格或1个Tabfunction hello() { console.log(Hello World); }语法2使用三个反引号推荐 function hello() { console.log(Hello World); } 效果function hello() { console.log(Hello World); }6.3 语法高亮Syntax Highlighting语法在三个反引号后面加语言名称javascript function hello() { console.log(Hello World); } python def hello(): print(Hello World) java public class Hello { public static void main(String[] args) { System.out.println(Hello World); } } sql SELECT * FROM users WHERE id 1; bash echo Hello World ls -la json { name: example, version: 1.0.0 } 效果functionhello(){console.log(Hello World);}defhello():print(Hello World)publicclassHello{publicstaticvoidmain(String[]args){System.out.println(Hello World);}}6.4 显示代码块本身转义问题如何在Markdown中显示代码块语法本身解决使用更多的反引号包围markdown javascript console.log(hello); 七、表格Tables7.1 基本表格语法| 列1 | 列2 | 列3 | | --- | --- | --- | | 内容1 | 内容2 | 内容3 | | 内容4 | 内容5 | 内容6 |效果列1列2列3内容1内容2内容3内容4内容5内容67.2 对齐方式语法| 左对齐 | 居中对齐 | 右对齐 | | :--- | :---: | ---: | | 内容1 | 内容2 | 内容3 | | 内容4 | 内容5 | 内容6 |效果左对齐居中对齐右对齐内容1内容2内容3内容4内容5内容67.3 表格中使用格式化语法| 功能 | 语法 | 说明 | | --- | --- | --- | | **加粗** | **文字** | 重点强调 | | *斜体* | *文字* | 一般强调 | | 代码 | 代码 | 代码片段 | | [链接](https://baidu.com) | [文字](URL) | 超链接 |效果功能语法说明加粗**文字**重点强调斜体*文字*一般强调代码代码代码片段链接[文字](URL)超链接7.4 表格技巧1. 表格可以不对齐但对齐更易读| 列1 | 列2 | |---|---| | 短 | 很长很长很长的内容 |2. 表格中换行| 列1 | 列2 | | --- | --- | | 第一行br第二行 | 内容 |效果列1列2第一行第二行内容3. 表格中使用颜色| 状态 | 说明 | | --- | --- | | span stylecolor: green;成功/span | 操作成功 | | span stylecolor: red;失败/span | 操作失败 |效果状态说明成功操作成功失败操作失败八、引用Blockquotes8.1 基本引用语法使用 这是一段引用文字效果这是一段引用文字8.2 多段引用语法 第一段引用 第二段引用效果第一段引用第二段引用8.3 嵌套引用语法 第一层引用 第二层引用 第三层引用效果第一层引用第二层引用第三层引用8.4 引用中使用其他语法语法 ## 引用中的标题 - 列表项1 - 列表项2 **加粗文字** 和 *斜体文字* javascript console.log(代码块); 效果引用中的标题列表项1列表项2加粗文字和斜体文字console.log(代码块);九、分隔线Horizontal Rules语法使用三个或以上的-、*或_--- *** ___效果十、转义字符Escaping10.1 需要转义的字符问题如何显示Markdown的特殊字符本身语法使用反斜杠\\*这不是斜体\* \**这不是加粗\** \# 这不是标题 \- 这不是列表 \[这不是链接\](url)效果*这不是斜体**这不是加粗*# 这不是标题- 这不是列表[这不是链接](url)10.2 可转义的字符列表字符名称\反斜杠反引号*星号_下划线{}花括号[]方括号()圆括号#井号加号-减号.点号!感叹号十一、高级技巧11.1 HTML标签万能方法重要提示大部分Markdown渲染器支持HTML标签 可以使用HTML实现Markdown无法实现的功能常用HTML标签!-- 文字样式 -- span stylecolor: red;红色文字/span span stylefont-size: 20px;大号文字/span span stylefont-family: Courier New;特定字体/span !-- 居中 -- center居中的内容/center !-- 换行 -- 第一行br第二行 !-- 空格 -- 使用nbsp;nbsp;nbsp;nbsp;多个空格 !-- 折叠内容 -- details summary点击展开/summary 这是折叠的内容 /details !-- 键盘按键 -- 按下 kbdCtrl/kbd kbdC/kbd 复制 !-- 高亮 -- mark高亮文字/mark !-- 上标下标 -- Hsub2/subO Xsup2/sup效果红色文字大号文字居中的内容第一行第二行使用 多个空格点击展开 这是折叠的内容按下CtrlC复制高亮文字H2OX211.2 脚注Footnotes语法这是一段文字[^1]这是另一段文字[^2]。 [^1]: 这是第一个脚注的内容 [^2]: 这是第二个脚注的内容效果部分渲染器支持这是一段文字1这是另一段文字2。11.3 定义列表Definition Lists语法部分渲染器支持术语1 : 定义1 术语2 : 定义2-1 : 定义2-211.4 缩写Abbreviations语法部分渲染器支持HTML是超文本标记语言 *[HTML]: Hyper Text Markup Language11.5 数学公式LaTeX行内公式这是行内公式 $E mc^2$效果需要支持LaTeX的渲染器这是行内公式E m c 2 E mc^2Emc2块级公式$$ \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$效果− b ± b 2 − 4 a c 2 a \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}2a−b±b2−4ac11.6 流程图Mermaid语法mermaid graph LR A[开始] -- B{判断} B --|是| C[执行] B --|否| D[结束] C -- D 效果需要支持Mermaid的渲染器是否开始判断执行结束11.7 序列图Sequence Diagrammermaid sequenceDiagram Alice-Bob: 你好Bob Bob-Alice: 你好Alice 效果AliceBob你好Bob你好AliceAliceBob11.8 Emoji表情语法:smile: :laughing: :blush: :heart: :thumbsup: 或直接使用Unicode Emoji ❤️ 效果 ❤️ ❤️ 常用Emoji代码效果说明:smile:微笑:laughing:大笑:heart:❤️爱心:thumbsup:点赞:fire:火:star:⭐星星:warning:⚠️警告:check:✅完成:x:❌错误十二、实用技巧总结12.1 文字颜色完整方案推荐方案!-- 方案1span style最推荐 -- span stylecolor: red;红色文字/span span stylecolor: red; font-weight: bold;红色加粗/span span stylecolor: white; background-color: red; padding: 2px 5px;红底白字/span !-- 方案2font标签简单但已废弃 -- font colorred红色文字/font !-- 方案3使用Emoji创意方法 -- 红色重要提示 绿色成功信息 ⚠️ 警告信息 !-- 方案4使用引用加粗无颜色但有视觉区分 -- **重要提示**这里是重点内容12.2 强调文字的多种方法!-- 方法1加粗 -- **这是重点** !-- 方法2高亮背景色 -- mark这是高亮/mark span stylebackground-color: yellow;这是黄色高亮/span !-- 方法3颜色 -- span stylecolor: red;这是红色重点/span !-- 方法4引用框 -- 这是引用框中的重点 !-- 方法5代码框 -- 这是行内代码样式 !-- 方法6表情符号 -- ⚠️ 这是警告 ✅ 这是成功 ❌ 这是错误 这是热门 ⭐ 这是重要 !-- 方法7组合使用 -- span stylecolor: red; font-weight: bold; background-color: yellow; 超级重点 /span效果对比这是重点这是高亮这是红色重点这是引用框中的重点这是行内代码样式⚠️ 这是警告✅ 这是成功❌ 这是错误 超级重点12.3 布局技巧1. 居中对齐center居中的内容/center div aligncenter 也是居中的内容 /div效果居中的内容也是居中的内容2. 两列布局table tr td width50% 左边的内容 - 列表1 - 列表2 /td td width50% 右边的内容 - 列表3 - 列表4 /td /tr /table效果左边的内容列表1列表2右边的内容列表3列表412.4 特殊字符和符号常用符号版权符号copy; 或 © 注册商标reg; 或 ® 商标符号trade; 或 ™ 小于号lt; 或 大于号gt; 或 与符号amp; 或 引号quot; 或 空格nbsp; 省略号hellip; 或 … 数学符号 ≈ 约等于 ≠ 不等于 ≤ 小于等于 ≥ 大于等于 × 乘号 ÷ 除号 ± 加减号 ∞ 无穷大 √ 根号 ∑ 求和 ∏ 连乘 ∫ 积分 箭头 → ← ↑ ↓ ⇒ ⇐ ⇑ ⇓ ↔ ⇔ 其他 ★ ☆ ✓ ✔ ✗ ✘ ♠ ♣ ♥ ♦效果版权符号© 或 ©注册商标® 或 ®商标符号™ 或 ™≈ ≠ ≤ ≥ × ÷ ± ∞ √ ∑ ∏ ∫→ ← ↑ ↓ ⇒ ⇐ ⇑ ⇓ ↔ ⇔★ ☆ ✓ ✔ ✗ ✘ ♠ ♣ ♥ ♦12.5 注释不显示的内容语法!-- 这是注释不会在渲染后显示 -- !-- 这是多行注释 第二行 第三行 --十三、不同平台的差异13.1 GitHub Markdown特色功能!-- 任务列表 -- - [x] 已完成 - [ ] 未完成 !-- 提及用户 -- username !-- #引用Issue -- #123 !-- 提交SHA引用 -- 16c999e8c71134401a78d4d46435517b2271d6ac !-- Emoji -- :smile: :1: !-- 表格 -- | 左对齐 | 居中 | 右对齐 | | :--- | :---: | ---: | | 内容 | 内容 | 内容 | !-- 语法高亮 -- javascript console.log(hello); !-- 折叠内容 -- details summary点击展开/summary 内容 /details13.2 Typora特色功能所见即所得编辑支持数学公式LaTeX支持流程图Mermaid支持更多HTML标签主题自定义13.3 VS Code Markdown推荐插件1. Markdown All in One - 快捷键支持 - 自动补全 - 格式化 2. Markdown Preview Enhanced - 增强预览 - 支持更多扩展语法 - 导出功能 3. markdownlint - 语法检查 - 规范提示十四、最佳实践14.1 文档结构建议# 标题一个文档只用一个一级标题 ## 目录可选 - [第一章](#chapter1) - [第二章](#chapter2) ## 第一章 {#chapter1} ### 1.1 小节 内容... ### 1.2 小节 内容... ## 第二章 {#chapter2} ### 2.1 小节 内容... --- ## 参考资料 1. [链接1](url1) 2. [链接2](url2)14.2 代码规范✅ 好的习惯 1. 标题前后空行 2. 列表缩进统一2空格或4空格 3. 代码块指定语言 4. 表格对齐 5. 链接使用引用式便于维护 ❌ 不好的习惯 1. 没有空行挤在一起 2. 缩进混乱 3. 代码块不指定语言 4. 表格不对齐 5. 链接直接内联难维护14.3 性能优化1. 图片使用外链或相对路径 2. 大型文档拆分多个文件 3. 避免过长的行建议80-120字符换行 4. 使用目录导航十五、快速参考表15.1 常用语法速查效果语法示例加粗**文字**加粗斜体*文字*斜体加粗斜体***文字***加粗斜体删除线~~文字~~删除线下划线u文字/u下划线代码代码代码链接[文字](url)链接15.2 颜色方案速查!-- 红色 -- span stylecolor: red;红色文字/span font colorred红色文字/font !-- 绿色 -- span stylecolor: green;绿色文字/span font colorgreen绿色文字/font !-- 蓝色 -- span stylecolor: blue;蓝色文字/span font colorblue蓝色文字/font !-- 背景色 -- span stylebackground-color: yellow;黄色背景/span !-- 组合 -- span stylecolor: white; background-color: red; padding: 2px 5px; border-radius: 3px; 白字红底 /span15.3 表情符号速查类型Emoji用途状态✅ ❌ ⚠️成功、失败、警告重要性 ⭐ 热门、重要、提示颜色标记 红绿黄蓝方向⬆️ ⬇️ ➡️ ⬅️上下左右开发 代码、Bug、工具、发布十六、常见问题FAQQ1: Markdown能改变文字颜色吗A: Markdown原生不支持颜色但可以通过HTML实现span stylecolor: red;红色文字/span font colorred红色文字/fontQ2: 为什么我的表格/代码块/颜色不生效A: 可能原因渲染器不支持该语法语法错误如表格的|没对齐HTML标签被禁用某些平台安全限制解决方案检查语法是否正确尝试其他渲染器使用纯Markdown语法不用HTMLQ3: 如何在Markdown中输入反引号本身A: 使用更多的反引号包围 显示一个反引号 显示两个反引号 显示三个反引号Q4: 如何让图片居中A: 使用HTMLcenter  /center 或 div aligncenter img srcurl / /divQ5: Markdown支持哪些图片格式A: 常见格式都支持JPG/JPEGPNGGIFSVGWebP部分支持Q6: 如何插入视频A: Markdown原生不支持视频需要使用HTML或平台特定语法!-- HTML5 video -- video width320 height240 controls source srcmovie.mp4 typevideo/mp4 /video !-- YouTube嵌入 -- iframe width560 height315 srchttps://www.youtube.com/embed/视频ID/iframe !-- 或使用链接到视频 -- [观看视频](video.mp4)十七、工具推荐17.1 在线编辑器工具链接特点Dillingerhttps://dillinger.io实时预览、导出多种格式StackEdithttps://stackedit.io功能强大、云同步Editor.mdhttps://pandao.github.io/editor.md开源、功能全面17.2 桌面编辑器工具平台特点TyporaWin/Mac/Linux所见即所得、界面美观VS Code跨平台插件丰富、开发友好Obsidian跨平台知识管理、双向链接Mark Text跨平台开源、简洁17.3 浏览器插件Markdown Here在网页编辑器中使用MarkdownMarkdown Viewer在浏览器中查看.md文件这是第一个脚注的内容 ↩︎这是第二个脚注的内容 ↩︎