Markdown 编辑器使用指南
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 支持大部分标准的表情符号,可使用输入法直接输入,也可手动输入字符格式。通过输入 `:` 触发自动完成。 #### 一些表情例子 ``` 🙂 :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile: 😥 :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] 发布激励计划 - [ ] 年度总结 ### 表格 如果需要展示数据什么的,可以选择使用表格。 | 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` 删除光标所在行或选中的行 [^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
删除光标所在行或选中的行
区块链技术网。
- 发表于 2020-01-23 23:24
- 阅读 ( 5493 )
- 学分 ( 5 )
- 分类:站务
评论