工具-Markdown

前言

• 宗旨
  
  • Markdown的目标是：易写易读；
  • Markdown 语法的目标是：成为一种适用于网络的书写语言；
• 兼容HTML
  
  • Markdown不是想取代HTML,HTML是一种发布格式，Markdown是一种书写格式；
  • Markdown兼容HTML语法，但是一些区块元素<div> <table> <pre> <p>需要前后加上空行和其他内容隔开，其他标签可以在标题，段落，列表中随意使用；
  • 在HTML区块标签间的Markdown语法不会被处理，但是区段（行内）标签间的Markdown语法是有效的；
• 特殊字符
  
  • HTML中有两个字符需要特殊处理：<(起始标签) &（标记HTML实体）,如果只是想显示这两个字符，必须要使用对应的实体形式< &；
  • Markdown会对特殊字符做处理，如果<用于起始标签，&用于实体，则保留，否则，会自动转换为对应实体< &；
  • Code范围内，不管是行内还是区块，< &都会被转换成HTML实体，便于用Markdown写HTML Code；

• 反斜杠
  Markdown对于一些特殊字符需要加入反斜杠来输入

  \ 反斜线
  `   反引号
  *   星号
  _   底线
  {}  花括号
  []  方括号
  ()  括弧
  #   井字号
  +   加号
  -   减号
  .   英文句点
  !   惊叹号
  

语法

1.段落和换行

• 一个Markdown段落是由一个或多个连续的文本行组成，前后要有一个以上的空行（若只包含空格和制表符，则该行也会被视为空行）。普通段落不该用空格或制表符来缩进；
• Markdown允许段落内强制换行，其他大部分text-to-HTML格式，会把每个换行符转换成<br/>标签，如果确实想通过Markdown来产生<br/>标签，需要插入两个以上空格再按回车；

2. 标题

• 有两种语法，类Setext和类atx形式；

• 类Setext形式是用底线对形式，=（高阶标题），-（第二阶标题）

  
  This is an H1
  =============
  
  
  
  This is an H2
  -------------
  

  任何数量对= -都有效果；

• 类atx形式是在行首加入1-6个#和一个空格，对应1-6阶标题

  
  # 这是 H1
  
  
  
  ## 这是 H2
  
  
  
  ###### 这是 H6
  

3.区块引用

• >和空格，在段落的每一行最前面加，也可以在整个段落第一行加一个就可以了；
  
>This is a quote
line 2
line 3

  对应效果如下
  

  This is a quote
  line 2
  line 3

• 区块引用可以嵌套使用，

  > This is the first level of quoting.
  >
  > > This is nested blockquote.
  >
  > Back to the first level.

  对应效果如下

  This is the first level of quoting.

  This is nested blockquote.

  Back to the first level.

• 引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等：

4.列表

• Markdown支持有序列表和无序列表；
• 有序列表则使用数字接着一个英文句点：
  
<ol><li>This is line 1;</li>
<li>This is line 2;</li>
<li>This is line 3;

  对应效果如下
• This is line 1;
• This is line 2;
• This is line 3;
• 无序列表使用星号、加号或是减号作为列表标记
  
<ul><li>This is line 1;</li>
<li>This is line 2;</li>
<li>This is line 3;

  对应效果如下
• This is line 1;
• This is line 2;
• This is line 3;

• • [ ] 列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符；
• 如果要在列表项目内放进引用，那 > 就需要缩进，如果要放代码区块的话，该区块就需要缩进两次，也就是 8 个空格或是 2 个制表符；

• 5.代码区块

  • 只要简单地缩进 4 个空格或是 1 个制表符就可以；

  6.分割线

  • 一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西，也可以在星号或是减号中间插入空格；

  7.链接

  • Markdown支持两种链接语法：行内式和参考式；
  • 行内式格式如下：
    
[Text](http://www.baidu.com "Title")

    效果如下：
    Text；
  • 参考式格式如下：
    
[id]: http://www.baidu.com "Title"
[Text][id]

    效果如下：

  Text
  + 链接可以是绝对路径，也可以是相对路径；

  8.图片

  • 图片语法和链接语法类似，只是在最前面多了一个 ! ，也分行内式和参考式；
  • 行内式格式如下：
    
![图片](http://i4.piimg.com/11340/7f638e192b9079e6.jpg "风景")

    效果如下：
    

  • 参考式格式如下：

    [id]: http://i4.piimg.com/11340/7f638e192b9079e6.jpg "风景"
    ![图片][id]

    效果如下：

    [image]:http://i4.piimg.com/11340/7f638e192b9079e6.jpg “风景”
    ![图片][image]

  9.强调

  • 强调有斜体，加粗以及加粗斜体；
  • 斜体：左右各一个 * 或者 _ 如下：
    
*斜体*

    效果如下：
    斜体
  • 加粗：左右各两个 * 或者 _ 如下：
    
**加粗**

    效果如下：
    加粗
  • 加粗斜体：左右各三个 *或者 _ 如下：
    
***加粗斜体***

    效果如下：
    加粗斜体

  10.代码

  • 代码语法有三种：
    
    • 行内代码
      
'printf()'

      效果是：printf() ;
    • 代码块
      

      printf()
      printf()
      

      效果如下：
      
printf()
printf()

    • 四个空格就可以输入代码块；

  11.表格

  • 格式如下：

    项目	价格	数量
    计算机	$1600	5
    手机	$12	12
    管线	$1	234

  • ---：代表居右，:--- 代表居左，:---: 代表居中；

  12.目录

  • 一般 [TOC] 就可以生成Markdown目录，但是只有部分编辑器支持该语法；
  • • [ ] Atom中的markdown-preview-enhanced不支持 [TOC]；

  13.待办事项

  • 待办事项有两种：未完成和已完成；
  • 未完成语法如下：
    
<ul><li>[ ] 未完成项目

    效果如下：
  • [ ] 未完成项目
• 已完成语法如下：
  
<ul><li>[X] 已完成项目

  效果如下：
• [X] 已完成项目

• 14.删除线

  • 前后两个 ~

    ~~删除线~~
    

    效果如下：
    删除线

  15.注脚

  • 注脚，有的编辑器不支持
    格式如下：
    
注脚[^keyword]
[^keyword]: 这是一个 *注脚* 的 **文本**

    效果如下：
    注脚[^keyword]
    [^keyword]: 这是一个 注脚 的 文本

  16.LaTex公式

  • LaTex公式有两种语法：行内和正行公式；
  • 行内：前后各一个 $ ：
    
这是一个公式 $E=mc^2$

    效果如下：
    这是一个公式 $E=mc^2$
  • 正航：前后各两个 $：
    
$$\sum_{i=1}^n a_i=0$$

    效果如下：
    $$\sum_{i=1}^n a_i=0$$
  • KaTex或者MathJax都可以用来渲染数学表达式，MathJax支持更多的符号，KaTex渲染更快；

  17.mermaid

  • 该语法只在特定编辑器下可用，如Atom的markdown-preview-enhanced；

  • 语法如下：

    ```{mermaid}
    ```
    

    在代码块需要指定特定图表类型；

  • flowchart

    • 语法

      ```{mermaid}
          graph TD
          A-->B
          A-->C
          B-->D
          C-->D
      ```
      

      效果如下：

          graph TD;
          A-->B;
          A-->C;
          B-->D;
          C-->D;

    • direction
      graph可用指定layout direction
      
      • TB - top bottom
      • BT - bottom top
      • RL - right left
      • LR - left right

    • Node&Shape

          ```{mermaid}
              graph TD
              A[ABC]
              B(BCD)
              C((CDE))
              D{DEF}
              E>EFG]
          ```
      

      效果如下：

      graph TD
      A[ABC]
      B(BCD)
      C((CDE))
      D{DEF}
      E>EFG]

  • sequenceDiagram

    ```{mermaid}
        sequenceDiagram
        participant Alice
        participant Bob
        Alice->John: Hello John, how are you?
        loop Healthcheck
        John->John: Fight against hypochondria
        end
        Note right of John: Rational thoughts <br/>prevail...
        John-->Alice: Great!
        John->Bob: How about you?
        Bob-->John: Jolly good!
    ```
    

    效果如下：

        sequenceDiagram
        participant Alice
        participant Bob
        Alice->John: Hello John, how are you?
        loop Healthcheck
        John->John: Fight against hypochondria
        end
        Note right of John: Rational thoughts <br/>prevail...
        John-->Alice: Great!
        John->Bob: How about you?
        Bob-->John: Jolly good!

  • gantt

    ```{mermaid}
        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d
    ```
    

    效果如下：

        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d