vscode之markdown使用

朱雀 2022-02-15 16:43 445阅读 0赞

一、安装插件

1. Markdown All in One（[链接][Link 1]）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70][]

2. Markdown Preview Enhanced（[链接][Link 2]）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1][]

3. Markdown Preview Github Styling（[链接][Link 3]）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 2][]

另：如需在vscode中支持mermaid流程图，还需安装插件 Markdown Preview Mermaid Support（链接）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 3][]

二、Markdown使用说明

快捷键
    ---------------------------
    撤销：Ctrl/Command + Z
    重做：Ctrl/Command + Y
    加粗：Ctrl/Command + B
    斜体：Ctrl/Command + I
    标题：Ctrl/Command + Shift + H
    无序列表：Ctrl/Command + Shift + U
    有序列表：Ctrl/Command + Shift + O
    检查列表：Ctrl/Command + Shift + C
    插入代码：Ctrl/Command + Shift + K
    插入链接：Ctrl/Command + Shift + L
    插入图片：Ctrl/Command + Shift + G
    
    标题
    ---------------------------
    
    # 1级标题
    
    ## 2级标题
    
    ### 3级标题
    
    #### 四级标题 
     
    ##### 五级标题  
    
    ###### 六级标题
    
    
    文本样式
    ---------------------------
    
    *强调文本* _强调文本_
    
    **加粗文本** __加粗文本__
    
    ==标记文本==
    
    ~~删除文本~~
    
    > 引用文本
    
    H~2~O is是液体。
    
    2^10^ 运算结果是 1024。
    
    
    
    列表
    ---------------------------
    
    - 项目
      * 项目
        + 项目
    
    1. 项目1
    2. 项目2
    3. 项目3
    
    - [ ] 计划任务
    - [x] 完成任务
    
    
    
    链接
    ---------------------------
    
    链接: [link](https://mp.csdn.net).
    
    图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg)
    
    带尺寸的图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg =30x30)
    
    居中的图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg#pic_center)
    
    居中并且带尺寸的图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg#pic_center =30x30)
    
    
    代码片
    ---------------------------
    
    下面展示一些 `内联代码片`。
    
    ```
    // A code block
    var foo = 'bar';
    ```
    
    ```javascript
    // An highlighted block
    var foo = 'bar';
    ```
    
    
    
    表格
    ---------------------------
    
    项目     | Value
    -------- | -----
    电脑  | $1600
    手机  | $12
    导管  | $1
    
    
    | Column 1 | Column 2      |
    |:--------:| -------------:|
    | centered 文本居中 | right-aligned 文本居右 |
    
    
    
    自定义列表
    ---------------------------
    
    Markdown
    :  Text-to-HTML conversion tool
    
    Authors
    :  John
    :  Luke
    
    
    
    注脚
    ---------------------------
    
    一个具有注脚的文本。[^1]
    
    [^1]: 注脚的解释
    
    
    
    注释
    ---------------------------
    
    Markdown将文本转换为 HTML。
    
    *[HTML]:   超文本标记语言
    
    
    
    LaTeX 数学公式
    ---------------------------
    
    Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall
    n\in\mathbb N$ 是通过 Euler integral
    
    $$
    \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
    $$
    
    
    插入甘特图
    ---------------------------
    
    ```mermaid
    gantt
            dateFormat  YYYY-MM-DD
            title Adding GANTT diagram functionality to mermaid
            section 现有任务
            已完成               :done,    des1, 2014-01-06,2014-01-08
            进行中               :active,  des2, 2014-01-09, 3d
            计划中               :         des3, after des2, 5d
    ```
    
    
    插入UML图
    ------------
    ```mermaid
    sequenceDiagram
    张三 ->> 李四: 你好！李四, 最近怎么样?
    李四-->>王五: 你最近怎么样，王五？
    李四--x 张三: 我很好，谢谢!
    李四-x 王五: 我很好，谢谢!
    Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.
    
    李四-->>张三: 打量着王五...
    张三->>王五: 很好... 王五, 你怎么样?
    ```
    
    插入Mermaid流程图
    --------
    ```mermaid
    graph LR
    A[长方形] -- 链接 --> B((圆))
    A --> C(圆角长方形)
    B --> D{菱形}
    C --> D
    ```
    
    插入Flowchart流程图
    -------
    ```mermaid
    flowchat
    st=>start: 开始
    e=>end: 结束
    op=>operation: 我的操作
    cond=>condition: 确认？
    
    st->op->cond
    cond(yes)->e
    cond(no)->op
    ```

[Link 1]: https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]: /images/20220215/09d8f278cc834ffdb1bf494d3156c857.png
[Link 2]: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1]: /images/20220215/88e5c7db08e14d9b9d8bc08011d73bf9.png
[Link 3]: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 2]: /images/20220215/732db97db26145b3b850223df23150da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 3]: /images/20220215/0848b4c5484949a2bcfee37aaa06a312.png