掘金Markdown编辑器

36 阅读2分钟

掘金Markdown编辑器

掘金Markdown编辑器 的基本语法知识。

一、常用

1、功能快捷键

撤销:Ctrl/Command + Z

重做:Ctrl/Command + Y

加粗:Ctrl/Command + B

斜体:Ctrl/Command + I

无序列表:Ctrl/Command + Shift + U

有序列表:Ctrl/Command + Shift + O

插入代码块:Ctrl/Command + Shift + C

插入行内代码块:Ctrl/Command + Shift + K

插入图片:Ctrl/Command + Shift + I

查找:Ctrl/Command + F

2、文本的样式

* + 文本 + * = 强调文本

_ + 文本 + _ = 强调文本

** + 文本 + ** = 加粗文本

__ + 文本 + __ = 加粗文本

~~ + 文本 + ~~ = 删除文本

> + space = 引用文本

引用文本

3、插入超链接与图片

超链接格式1: [链接名称](链接地址)

超链接效果1: 链接名称

超链接格式2:

[链接名称][1]
[链接名称][2]

[1]: https://mermaidjs.github.io/
[2]: https://mermaidjs.github.io/

超链接效果2: 同一

图片格式: ![图片描述](图片链接)

图片效果:图片描述

4、列表

无序列表:'-' + 'space'

  • 项目
    • 项目
      • 项目

有序列表:'数字' + '.'

  1. 项目1
  2. 项目2
  3. 项目3

复选框未勾选:'-' + 'space' + '[ ]'

  • 计划任务

复选框勾选:'-' + 'space' + '[x]'

  • 完成任务

5、表格

1) 简单表格:
项目Value
电脑$1600
手机$12
导管$1
| 项目 | Value  |
| -- | ------ |
| 电脑 | \$1600 |
| 手机 | \$12   |
| 导管 | \$1    |
2) 设定表格内容居中、居左、居右:

使用:---------:居中

使用:----------居左

使用----------:居右

第一列第二列第三列
第一列文本居中第二列文本居右第三列文本居左
|   第一列   |     第二列 | 第三列     |
| :-----: | ------: | :------ |
| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 |

二、不常用

1、注脚(在Footnotes中展示注脚的解释)

标注1(链接格式)1

标注2(文本格式)2

标注1(链接格式)[^1]
标注2(文本格式)[^2]

[^1]: [注脚1的解释](https://juejin.cn/)
[^2]: 注脚2的解释

2、新的甘特图功能,丰富你的文章

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
        计划二               :         des4, after des3, 5d
    ```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
            计划二               :         des4, after des3, 5d
    ```
  • 关于 甘特图 语法3,参考 这儿

3、UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图:

sequenceDiagram
张三 ->> 李四: 你好!李四, 最近怎么样?
李四-->>王五: 你最近怎么样,王五?
李四--x 张三: 我很好,谢谢!
李四-x 王五: 我很好,谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
    ```mermaid
    sequenceDiagram
    张三 ->> 李四: 你好!李四, 最近怎么样?
    李四-->>王五: 你最近怎么样,王五?
    李四--x 张三: 我很好,谢谢!
    李四-x 王五: 我很好,谢谢!
    Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

    李四-->>张三: 打量着王五...
    张三->>王五: 很好... 王五, 你怎么样?
    ```

这将产生一个流程图。:

graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
    ```mermaid
    graph LR
    A[长方形] -- 链接 --> B((圆))
    A --> C(圆角长方形)
    B --> D{菱形}
    C --> D
    ```
  • 关于 Mermaid 语法4,参考 这儿

Footnotes

  1. 注脚1的解释

  2. 注脚2的解释

  3. 甘特图语法

  4. Mermaid语法