Markdown 扩展¶

由于 markdown 的简约高效，也出现了许多不同的 markdown 扩展功能

Mermaid¶

Mermaid 是一种支持更多图表的扩展，它支持在markdown中画出甘特图，类图，流程图，ER图等一系列图表，具体语法可以参考 Mermaid Docs，这里只给出安装教程以及一些例子

Mermaid 扩展安装教程¶

在 Visual Studio Code 中，你可以安装如 Markdown Preview Mermaid Support 等支持 mermaid 的插件；

mermaid plugins

安装完成后，使用以下语法即可

``` mermaid

your mermaid code here

```

如果你因为某些原因无法正确安装 mermaid 插件，也可以通过 Mermaid 官方的编辑器 Mermaid Live Editor 编辑完后保存图像，再通过图像插入的语法插入到你的 md 文档中

流程图 Graph¶

代码：

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

渲染效果：

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

序列图 Sequence Diagram¶

代码：

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

渲染效果：

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

类图 Class¶

代码：

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

渲染效果：

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

ER 图¶

代码：

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

渲染效果：

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

甘特图 Gantt¶

代码：

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

渲染效果：

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

Git¶

代码：

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

渲染效果：

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

饼状图 Pie¶

代码：

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

渲染效果：

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

思维导图 Mindmap¶

代码：

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectivness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

渲染效果：

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectivness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

Marp¶

Marp 是一款能够通过 Markdown 制作幻灯片的扩展

Marp 安装教程¶

在 Visual Studio Code 中，你可以安装 Marp For VS Code 插件；

mermaid plugins

Marp 简单教程¶

Marp 的完整教程可以通过查看官方文档来进行学习，这里只给出基础教程

初始化 Marp¶

在你的 md 文档的最前面加入以下代码即可

---
marp: true
---

预览¶

在 Visual Studio Code 中，点击右上角的预览图标即可查看幻灯片效果

Warning

在 Visual Studio Code 中，如果已经安装 Markdown Preview Enhanced 等优化预览效果的插件时，可能会导致 Marp 无法达到幻灯片式的预览效果；如果发生这种情况，请使用 Visual Studio Code 原生的 md 文档预览功能或者禁用 Markdown Preview Enhanced 等优化预览效果的插件

创建幻灯片页面¶

在 Marp 中，幻灯片文字内容的语法与 Markdown 一致，你可以通过 # 创建标题，> 创建引用等等；如果你想分隔开两张幻灯片，请使用 --- 来区分不同的幻灯片

some text. 

---

some text.

插入图片¶

在 Marp 中，幻灯片图片插入的语法与 Markdown 一致，也是 ![img name](img link) 但是有时候图片可能会很大，此时可以设置图片的高度 h 和宽度 w ：

![w:250 h:250 name](assets/img/picture.png)

导出为 .pdf 或 .ppt¶

在 Visual Studio Code 中，点击右上角的 Marp 图标，在弹出的面板中选择 Export Slide Deck ，之后选择你需要的格式即可

export

例子¶

这里引用 Marp官网的例子

---
theme: gaia
_class: lead
paginate: true
backgroundColor: #fff
backgroundImage: url('https://marp.app/assets/hero-background.svg')
---

![bg left:40% 80%](https://marp.app/assets/marp.svg)

# **Marp**

Markdown Presentation Ecosystem

https://marp.app/

---

# How to write slides

Split pages by horizontal ruler (`---`). It's very simple! :satisfied:

```markdown
# Slide 1

foobar

---

# Slide 2

foobar
 ```

渲染效果如下：

example