markdown教程 · 前端技术指南

## 前言 Markdown 语法的目标是：成为一种适用于网络的书写语言,那么作为爱写文章的你应该掌握下它的基本语法。 ## 概述 [官方中文地址](http://www.markdown.cn/) [mdeditor在线教程](https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown) * 兼容 HTML >不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。要制约的只有一些 HTML 区块元素――比如 `<div>`、`<table>`、`<pre>`、`<p>` 等标签，必须在前后加上空行与其它内容区隔开，还要求它们的开始标签与结尾标签不能用制表符或空格来缩进。Markdown 的生成器有足够智能，不会在 HTML 区块标签外加上不必要的` <p>` 标签。 * 比如下面的表格就是用html代码完成的，并不冲突。在hexo驱动中，可能需要去空行压缩处理才能去掉多余的换行。 ``` html <table> <tr> <td>自定义名称</td> <td>自定义描述</td> </tr> <tr> <td>姓名</td> <td>xx</td> </tr> </table> ``` <table style="margin-top:0"><tr><td>自定义名称</td><td>自定义描述</td></tr><tr><td>姓名</td><td>xx</td></tr></table> * 特殊字符自动转换类似html文件中： < 和 & ，markdown会自动转化，不需要手动处理。 ## 区块元素 ### 段落和换行连续的文本都会识别为一个段落，中间有换行识别为换行，如果想另起一个段落需要中间加空白行。 ### 标题 * Markdown 支持两种标题的语法，类 Setext 和类 atx 形式。类 Setext 形式是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题），例如：任何数量的 = 和 - 都可以有效果。 * 类 Atx 形式则是在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶，例如：末尾的闭合可以不用加. ### 区块引用 Markdown 标记区块引用是使用类似 email 中用 > 的引用方式。内部可以在写引入或者列表，你可以在一个引入内只写一个，避免重复。 ### 列表的使用无序列表可以用*、-、+等，熟练使用一种即可；有序列表用数字加英"." ,数字不会影响有序列表的显示。需要注意的是无序和有序列表内容开始之前都要加空格，另外一个项目之内有空白行的会把之前的内容用p标签包裹。 ### 代码区块代码区块可以用一个tab或者四个空格。 ### 分割线你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线。 ## 区段元素 ### 链接用中括号写连接文字，小括号写连接地址，或者冒号加连接地址(地址可以为相对地址)。 ### 强调 Markdown 使用星号（*）和底线（_）作为标记强调字词的符号，被 * 或 _ 包围的字词会被转成用 <em> 标签包围，用两个 * 或 _ 包起来的话，则会被转成 <strong> ### 代码反引号可以用来引入代码，引入代码段用3个**"\`"**+ codetype 开始，以 3个**"\`"**结束即可。 ### 图片叹号+中括号+图片路径，目前没办法指定图片大小，可以使用普通的img标签来定义图片。 ## 其他 ### 反斜杠 Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号，例如：如果你想要用星号加在文字旁边的方式来做出强调效果（但不用 <em> 标签），你可以在星号的前面加上反斜杠 ### 自动链接 Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用尖括号包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样。 <https://csnikey.github.io/blog> ### 删除线前后用`~~`分别隔离就可以实现删除线,比如下面的例子 ~~123~~ ### 注脚支持的部分追加^可以实现注脚的功能： [^123f ] ## 表格表格头与表格用---|--- 隔开，每列用|隔开即可。需要注意的是表格需要空一行开始。如果你需要文本水平居中，可以在左右加：实现。项目|描述 ---|--- 产品|自行车 ## LaTeX 公式 $ 表示行内公式：质能守恒方程可以用一个很简洁的方程式来表达。$$ 表示整行公式：访问 [MathJax](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) 参考更多使用方法。 ## 时序图时序图主要有一下几个元素：角色，对象，生命线，激活器和消息，[序列图语法参考](http://bramp.github.io/js-sequence-diagrams/) #### 示例 1 ```seq Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! ``` #### 示例 2 ```seq Title: Here is a title A->B: Normal line B-->C: Dashed line C->>D: Open arrow D-->>A: Dashed open arrow ``` ## 甘特图甘特图内在思想简单。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。 ```gantt title 项目开发流程 section 项目确定需求分析 :a1, 2016-06-22, 3d 可行性报告 :after a1, 5d 概念验证 : 5d section 项目实施概要设计 :2016-07-05 , 5d 详细设计 :2016-07-08, 10d 编码 :2016-07-15, 10d 测试 :2016-07-22, 5d section 发布验收发布: 2d 验收: 3d ``` 更多语法参考：[甘特图语法参考](https://knsv.github.io/mermaid/#gant-diagrams) ## Mermaid 流程图 ```graphLR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] ``` 更多语法参考：[Mermaid 流程图语法参考](https://knsv.github.io/mermaid/#flowcharts-basic-syntax) ## Mermaid 序列图 ```sequence Alice->John: Hello John, how are you? loop every minute John-->Alice: Great! end ``` 更多语法参考：[Mermaid 序列图语法参考](https://knsv.github.io/mermaid/#sequence-diagrams) ## 待办事宜 Todo 列表使用带有 [ ] 或 [x] （未完成或已完成）项的列表语法撰写一个待办事宜列表，并且支持子列表嵌套以及混用Markdown语法，例如： - [ ] **Cmd Markdown 开发** - [ ] 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率 - [ ] 支持以 PDF 格式导出文稿 - [x] 新增Todo列表功能 [语法参考](https://github.com/blog/1375-task-lists-in-gfm-issues-pulls-comments) - [x] 改进 LaTex 功能 - [x] 修复 LaTex 公式渲染问题 - [x] 新增 LaTex 公式编号功能 [语法参考](http://docs.mathjax.org/en/latest/tex.html#tex-eq-numbers) - [ ] **七月旅行准备** - [ ] 准备邮轮上需要携带的物品 - [ ] 浏览日本免税店的物品 - [x] 购买蓝宝石公主号七月一日的船票 ## 参考地址 - [作业部落教程](https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown)