Markdown文章编辑利器-进阶篇2

发表于

介绍markdown所支持的扩展语法：数学公式，流程图，序列图，甘特图，饼图，折线图，柱状图，条形图等语法。有些语法部分markdown编辑器并不能识别，通用性较少，且为方言版本，仅供参考。

1.数学公式

  • 语法兼容于LaTeX。
  • 使用一对$包含特定的数学语法。
    数学公式插图

关于更多LaTex语法可查看：

1
https://www.latex-project.org/

2.mermaid流程图, 序列图和甘特图

  • 流程图:
    1
    2
    3
    4
    5
    ```mermaid
    graph TD;
        A-->B;
        B-->C;
    ```

流程图插图

  • 序列图:
    1
    2
    3
    4
    5
    ```mermaid
    sequenceDiagram
    A->> B: 吃饭了吗？
    B->> A: 刚吃完饭了。
    ```

序列图插图

  • 甘特图:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ```mermaid
    gantt
    title 甘特图
    dateFormat  YYYY-MM-DD
    section 项目A
    任务1     :a1, 2019-01-01, 150d
    任务2     :after a1, 30d
    section 项目B
    任务3      :2019-02-01, 60d
    任务4      :30d
    ```

甘特图插图

关于更多mermaid语法可查看：

1
https://knsv.github.io/mermaid/

一些支持mermaid语法的编辑器：

  1. typora
  2. 印象笔记
  3. CSDN博客​
  4. 小书匠

3.图表

  • 饼状图：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ```chart
    ,Budget,Income,Expenses,Debt
    June,5000,8000,4000,6000
    July,3000,1000,4000,3000
    Aug,5000,7000,6000,3000
    Sep,7000,2000,3000,1000
    Oct,6000,5000,4000,2000
    Nov,4000,3000,5000,

    type: pie
    title: Monthly Revenue
    x.title: Amount
    y.title: Month
    y.suffix: $
    ```

饼状图插图

  • 折线图：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ```chart
    ,Budget,Income,Expenses,Debt
    June,5000,8000,4000,6000
    July,3000,1000,4000,3000
    Aug,5000,7000,6000,3000
    Sep,7000,2000,3000,1000
    Oct,6000,5000,4000,2000
    Nov,4000,3000,5000,

    type: line
    title: Monthly Revenue
    x.title: Amount
    y.title: Month
    y.suffix: $
    ```

折线图插图

  • 柱状图：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ```chart
    ,Budget,Income,Expenses,Debt
    June,5000,8000,4000,6000
    July,3000,1000,4000,3000
    Aug,5000,7000,6000,3000
    Sep,7000,2000,3000,1000
    Oct,6000,5000,4000,2000
    Nov,4000,3000,5000,

    type: column
    title: Monthly Revenue
    x.title: Amount
    y.title: Month
    y.suffix: $
    ```

柱状图插图

  • 条形图：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ```chart
    ,Budget,Income,Expenses,Debt
    June,5000,8000,4000,6000
    July,3000,1000,4000,3000
    Aug,5000,7000,6000,3000
    Sep,7000,2000,3000,1000
    Oct,6000,5000,4000,2000
    Nov,4000,3000,5000,

    type: bar
    title: Monthly Revenue
    x.title: Amount
    y.title: Month
    y.suffix: $
    ```

条形图插图

注意：目前已知支持软件印象笔记。

4.github快速表格

  • 在github的markdown编辑器中可以使用以下方式创建表格。
  • 使用一对---包含表格内容；
  • 表格标题使用:区分；
  • 单元格内可以存在多个内容。

注意：只能在文件开头处使用。

示例1：

1
2
3
4
5
---
title: Hello world
date: 2019-01-01
tags: 文章
---

github快速表格插图1

示例2：

1
2
3
4
5
6
7
---
title: Hello world
date: 2019-01-01
tags: 
  - 文章
  - 随笔
---

github快速表格插图2

5.注释

  • 兼容于html注释语法。

示例：

1
<!--注释内容-->

6.避免转译代码块

  • 主要用于演示代码块。

示例：

1
2
3
4
5
6
7
````markdown
```cpp
int main() 
{
}
```
````

效果：

1
2
3
4
5
```cpp
int main() 
{
}
```