關於插件Markdown Preview Enhanced的使用技巧

目錄：

• 1.關於TOC
• 2.關於轉義符
• 3.繪圖
  • 3.0 繪圖配色主題
  • 3.1 Flowchart（流程圖）
  • 3.2 Sequence diagram(順序圖)
• 4 保存爲HTML

<div style="color:gray;text-align:right">shanzm</div>

<hr style="height:8px;border:none;border-top:5px double black;" />

1.關於TOC

Github不支持TOC，因此咱們要本身寫目錄再給目錄加鏈接，很麻煩

其實，使用以下命令，以後保存，自動在該命令處生成標題

你能夠經過 cmd-shift-p 而後選擇 Markdown Preview Enhanced: Create Toc 命令來建立 TOC。 多個 TOCs 能夠被建立。 若是你想要在你的 TOC 中排除一個標題，請在你的標題 後面 添加 {ignore=true} 便可。

以後會自動生成以下代碼：

<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

其中depthFrom=1 depthTo=6表示從一級標題到六級標題

==注意：多是插件的Bug,你要先在Ctrl+Shift+P-->toc,以後點擊預覽（Ctrl+K+V），此時在點擊保存（Ctrl+s),纔會自帶生成目錄。如果輸入命令toc以後直接保存，不會生成目錄。==

順便說一下：博客園也支持高亮語法」==高亮內容==「

2.關於轉義符

這和Markdown Preview View無關，是Markdown的語法：

符號	轉義符
<	& #60;
>	& #62;
&	& #38;
@	& #64;

3.繪圖

支持好多繪圖引擎 可是自帶支持最好的親試是：mermaid

3.0 繪圖配色主題

你可經過下面命令打開 mermaid 配置文件

Markdown Preview Enhanced: Open Mermaid Config

//設置mermaid繪圖的風格
//一共有三個主題：
// mermaid.css
// mermaid.dark.css
// mermaid.forest.css
Mermaid_Theme={
  theme:mermaid.forest.css 
}

3.1 Flowchart（流程圖）

注意：

1. 方向

符號	意義
TB	從上到下
BT	從下到上
RL	從右到左
LR	從左到右

1. 圖線

符號	意義
>	添加尾部箭頭
-	不添加尾部箭頭
--	單線
--text--	單線上加文字
==	粗線
==text==	粗線加文字
-.-	虛線
-.text.-	虛線加文字

1. 節點

表述	說明
id[文字]	矩形節點
id(文字)	圓角矩形節點
id((文字))	圓形節點
id>文字]	右向旗幟狀節點
id{文字}	菱形節點

1. 示例1

```mermaid
graph TD;
    A-->B;
    A-->C;
    A-->D;
    M;
    B-->F;
    B-->G;
    G-->F
    C-->H;

如圖：

示例2

```mermaid
graph LR;
a==>b;
b-->c;
a--聯繫-->c;
a-->s;
a-.->f;
s-->j;
c---id2;

subgraph 圖表名;
        id2[默認方形]==粗線==>id3{菱形}
        id3-.虛線.->id4>右向旗幟]
        id3--無箭頭---id5((圓形))
    end

如圖：

3.2 Sequence diagram(順序圖)

```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!

如圖：

3.3 甘特圖(Gantt diagram)

```mermaid
gantt
    dateFormat  YYYY-MM-DD
    title 爲mermaid加入甘特圖功能
    section A部分
    完成任務        :done, des1,2019-01-06,2019-01-08
    正進行任務      :active, des2,2019-01-09,3d
    待開始任務      :des3, after des2, 5d
    待開始任務2     :des4, after des3, 5d
    section 緊急任務
    完成任務        :crit,done,2019-01-06,24h
    實現parser     :crit,done,after des1, 2d
    爲parser編寫test :crit, active, 3d
    待完成任務      :crit,5d
    爲rendere編寫test: 2d
    將功能加入到mermaid: 1d

如圖：

3.4 保存爲HTML

另存爲html好像和在瀏覽器中打開，使用singleFile插件保存的效果是同樣的