Markdown 编辑器使用指南

晓娜
更新于 2020-01-23 23:24
阅读 6437

Markdown 编辑器使用指南

这是一篇讲解如何正确使用 **Markdown** 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。

本编辑器支持所见即所得模式，可以在工具栏切换（切换快捷键：  `ctrl shift m` / `⌘ ⇧ m` ），所见即所得模式下，**粘贴 HTML将 自动转换为 Markdown格式**。

> 引用文本：Markdown is a text formatting syntax inspired

## Markdown 语法
### 标题 - Heading 2
可以选择使用 H1 至 H6，使用 `## title` 打头， 快捷键： `ctrl h` / `⌘ h` 。建议文章的顶级标题使用 Heading 2，回答的顶级标题使用 Heading 3.

> NOTE: 别忘了 # 后面需要有空格！

#### Heading 4
### 图片
```
![alt 文本](http://image-path.png)  
```

我们使用的图床也支持URL作图，如果图片太大可以在URL结尾添加  `!/scale/50` 来等比例缩放图片（50表示缩小50%）。

**支持复制粘贴直接上传**。

### 段落
空行可以将内容进行分段，便于阅读。（这是第一段）

使用空行在 Markdown 排版中相当重要。（这是第二段）

### 常用格式
这段内容展示了在内容里面一些排版格式，比如：

- `**加粗**`  （快捷键： `ctrl b` / `⌘ b`）： **加粗**
- `*倾斜*` （快捷键： `ctrl i` / `⌘ i`）：  *倾斜*
- `~~删除线~~` （ 快捷键：`ctrl s` / `⌘ s`）： ~~删除线~~
- `[超级链接](https://learnblockchain.cn)` ： [超级链接](https://learnblockchain.cn)

### 代码块
行内代码块，使用： \` Code 标记 \`  效果： `Code 标记` ， 快捷键： `ctrl g` / `⌘ g`

#### 多行代码
使用  ``` 并换行，快捷键  `ctrl u` / `⌘ u`:

```
var a = 1  
var b = 1 
```

#### 语法高亮支持
如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如：

##### 演示 Go 代码高亮
```go
package main  
  
import "fmt"  
  
func main() {  
 fmt.Println("Hello, 世界")  
}  
```

### 脚注
这是一个脚注[^1]。

脚注引用通过 `[^标识符]` 创建，标识符部分可以是数字或者文本，但不能包含空格或者制表符。标识符仅用于关联引用和定义，在渲染时会自动根据脚注定义顺序进行数字递增渲染。不过这也不是绝对的，某些 Markdown 引擎也会将标识符部分用于渲染。

脚注定义使用 `[^标识符]:` 来创建，冒号后面就是需要添加的细节说明或者参考。脚注定义不一定非要放在整个 Markdown 文本的末尾，夹在段落、列表或者块引用之间也是可以工作的。

### 数学公式

多行公式块（使用两个`$$`及换行）：

```
$$  
E=Mc^2  
$$  
```

效果如：

$$
E=Mc^2
$$

行内公式：` $a^2 + b^2 = \color{red}c^2$` 效果如： $a^2 + b^2 = \color{red}c^2$  。

> Tip: 语言名称支持下面这些： `ruby` , `python` , `js` , `html` , `erb` , `css` , `coffee` , `bash` , `json` , `yml` , `xml` ...

### 表情符号 Emoji
支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。通过输入 `:` 触发自动完成。

#### 一些表情例子
```
:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile:  :cry: :triumph: :heart_eyes:  :satisfied: :relaxed: :sunglasses: :weary:

:+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :shit: :sweat_drops: :exclamation: :anger:
```

显示如下：
? ? ? ? ? ?  ? ? ?  ? ☺️ ? ?

? ? ? ? ? ? ❓ ? ❤️ ☕️ ? ? ? ? ? ? ❗️ ?

更多表情请访问：[http://www.emoji-cheat-sheet.com](http://www.emoji-cheat-sheet.com)

### 有序、无序、任务列表
#### 无序列表
- Java- Spring- IoC
- Go- gofmt- Wide

#### 有序列表
1. Node.js
   1.1. Express
   1.2. Koa
2. Go
   2.1. gofmt
   2.2. Wide

#### 任务列表
- [X] 发布激励计划
- [ ] 年度总结

### 表格
如果需要展示数据什么的，可以选择使用表格。

### 隐藏细节
<details>
<summary>这里是摘要部分。</summary>
这里是细节部分。
</details>

### 流程图
```
	```mermaid
	graph TB
	    c1-->a2
	    subgraph one
	    a1-->a2
	    end
	    subgraph two
	    b1-->b2
	    end
	    subgraph three
	    c1-->c2
	    end
	```
```

效果如下：

```mermaid
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
```

### 时序图
```
	```mermaid
	sequenceDiagram
	    Alice->>John: Hello John, how are you?
	    loop Every minute
	        John-->>Alice: Great!
	    end
	```
```

效果如下：

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    loop Every minute
        John-->>Alice: Great!
    end
```

### 甘特图
``````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2019-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2019-01-12  , 12d
    another task      : 24d
```
``````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````

效果如下：

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

### 多媒体
支持 v.qq.com，youtube.com，youku.com，coub.com，facebook.com/video，dailymotion.com，.mp4，.m4v，.ogg，.ogv，.webm，.mp3，.wav 链接解析

`https://v.qq.com/x/cover/zf2z0xpqcculhcz/y0016tj0qvh.html`

https://v.qq.com/x/cover/zf2z0xpqcculhcz/y0016tj0qvh.html

## 快捷键
: 表情自动完成
`ctrl e` / `⌘ e` 常用表情提示
`ctrl h` / `⌘ h` 标题提示
`ctrl b` / `⌘ b` 粗体
`ctrl i` / `⌘ i` 斜体
`ctrl s` / `⌘ s` 删除线
`ctrl shift d` / `⌘ ⇧ d` 分割线
`ctrl .` / `⌘ . ` 引用
`ctrl l ` / ⌘ l 无序列表
`ctrl o` / ⌘ o 有序列表
`ctrl j` / `⌘ j` 任务列表
`ctrl u` / `⌘ u` 代码块
`ctrl g` / `⌘ g` 行内代码
`ctrl z` / `⌘ z` 撤销
`ctrl y` / `⌘ y` 恢复
`ctrl k` / `⌘ k` 链接
`ctrl m` / `⌘ m` 表格
`ctrl p` / `⌘ p` 预览编辑模式切换
`ctrl ' ` / `⌘ '` 全屏编辑模式切换
`ctrl shift d` / `⌘ ⇧ d` 复制当前行或选中的内容
`ctrl Backspace` / `⌘ Backspace` 删除光标所在行或选中的行

[^1]: 脚注解释。

这是一篇讲解如何正确使用 Markdown 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。

本编辑器支持所见即所得模式，可以在工具栏切换（切换快捷键： ctrl shift m / ⌘ ⇧ m ），所见即所得模式下，粘贴 HTML将自动转换为 Markdown格式。

引用文本：Markdown is a text formatting syntax inspired

Markdown 语法

标题 - Heading 2

可以选择使用 H1 至 H6，使用 ## title 打头，快捷键： ctrl h / ⌘ h 。建议文章的顶级标题使用 Heading 2，回答的顶级标题使用 Heading 3.

NOTE: 别忘了 # 后面需要有空格！

Heading 4

图片

![alt 文本](http://image-path.png)

我们使用的图床也支持URL作图，如果图片太大可以在URL结尾添加 !/scale/50 来等比例缩放图片（50表示缩小50%）。

支持复制粘贴直接上传。

段落

空行可以将内容进行分段，便于阅读。（这是第一段）

使用空行在 Markdown 排版中相当重要。（这是第二段）

常用格式

这段内容展示了在内容里面一些排版格式，比如：

**加粗** （快捷键： ctrl b / ⌘ b）：加粗
*倾斜* （快捷键： ctrl i / ⌘ i）：倾斜
~~删除线~~ （快捷键：ctrl s / ⌘ s）： ~~删除线~~
[超级链接](https://learnblockchain.cn) ：超级链接

代码块

行内代码块，使用： ` Code 标记 ` 效果： Code 标记 ，快捷键： ctrl g / ⌘ g

多行代码

使用 `` 并换行，快捷键ctrl u/⌘ u`:

var a = 1  
var b = 1

语法高亮支持

如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如：

演示 Go 代码高亮

package main  

import "fmt"  

func main() {  
 fmt.Println("Hello, 世界")  
}

脚注

这是一个脚注^1。

脚注引用通过 [^标识符] 创建，标识符部分可以是数字或者文本，但不能包含空格或者制表符。标识符仅用于关联引用和定义，在渲染时会自动根据脚注定义顺序进行数字递增渲染。不过这也不是绝对的，某些 Markdown 引擎也会将标识符部分用于渲染。

脚注定义使用 [^标识符]: 来创建，冒号后面就是需要添加的细节说明或者参考。脚注定义不一定非要放在整个 Markdown 文本的末尾，夹在段落、列表或者块引用之间也是可以工作的。

数学公式

多行公式块（使用两个$$及换行）：

$$  
E=Mc^2  
$$

效果如：

$$ E=Mc^2 $$

行内公式： $a^2 + b^2 = \color{red}c^2$ 效果如： $a^2 + b^2 = \color{red}c^2$ 。

Tip: 语言名称支持下面这些： ruby , python , js , html , erb , css , coffee , bash , json , yml , xml ...

表情符号 Emoji

支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。通过输入 : 触发自动完成。

一些表情例子

:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile:  :cry: :triumph: :heart_eyes:  :satisfied: :relaxed: :sunglasses: :weary:

:+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :shit: :sweat_drops: :exclamation: :anger:

显示如下： ? ? ? ? ? ? ? ? ? ? ☺️ ? ?

? ? ? ? ? ? ❓ ? ❤️ ☕️ ? ? ? ? ? ? ❗️ ?

更多表情请访问：http://www.emoji-cheat-sheet.com

有序、无序、任务列表

无序列表

Java- Spring- IoC
Go- gofmt- Wide

有序列表

Node.js 1.1. Express 1.2. Koa
Go 2.1. gofmt 2.2. Wide

任务列表

[X] 发布激励计划
[ ] 年度总结

表格

如果需要展示数据什么的，可以选择使用表格。

header 1	header 3
cell 1	cell 2
cell 3	cell 4
cell 5	cell 6

隐藏细节

<details> <summary>这里是摘要部分。</summary> 这里是细节部分。 </details>

流程图

    ```mermaid
    graph TB
        c1-->a2
        subgraph one
        a1-->a2
        end
        subgraph two
        b1-->b2
        end
        subgraph three
        c1-->c2
        end


效果如下：

```mermaid
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

时序图

    ```mermaid
    sequenceDiagram
        Alice->>John: Hello John, how are you?
        loop Every minute
            John-->>Alice: Great!
        end


效果如下：

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    loop Every minute
        John-->>Alice: Great!
    end

甘特图

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


效果如下：

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

多媒体

支持 v.qq.com，youtube.com，youku.com，coub.com，facebook.com/video，dailymotion.com，.mp4，.m4v，.ogg，.ogv，.webm，.mp3，.wav 链接解析

https://v.qq.com/x/cover/zf2z0xpqcculhcz/y0016tj0qvh.html

https://v.qq.com/x/cover/zf2z0xpqcculhcz/y0016tj0qvh.html

快捷键

: 表情自动完成 ctrl e / ⌘ e 常用表情提示 ctrl h / ⌘ h 标题提示 ctrl b / ⌘ b 粗体 ctrl i / ⌘ i 斜体 ctrl s / ⌘ s 删除线 ctrl shift d / ⌘ ⇧ d 分割线 ctrl . / ⌘ . 引用 ctrl l / ⌘ l 无序列表 ctrl o / ⌘ o 有序列表 ctrl j / ⌘ j 任务列表 ctrl u / ⌘ u 代码块 ctrl g / ⌘ g 行内代码 ctrl z / ⌘ z 撤销 ctrl y / ⌘ y 恢复 ctrl k / ⌘ k 链接 ctrl m / ⌘ m 表格 ctrl p / ⌘ p 预览编辑模式切换 ctrl ' / ⌘ ' 全屏编辑模式切换 ctrl shift d / ⌘ ⇧ d 复制当前行或选中的内容 ctrl Backspace / ⌘ Backspace 删除光标所在行或选中的行

学分: 5
分类: 站务
标签:

本文参与登链社区写作激励计划，好文好收益，欢迎正在阅读的你也加入。

Markdown 编辑器使用指南

Markdown 语法

标题 - Heading 2

Heading 4

图片

段落

常用格式

代码块

多行代码

语法高亮支持

演示 Go 代码高亮

脚注

数学公式

表情符号 Emoji

一些表情例子

有序、无序、任务列表

无序列表

有序列表

任务列表

表格

隐藏细节

流程图

时序图

甘特图

多媒体

快捷键

0 条评论

文章目录