CSDN - markdown 编辑器模板
# <center>CSDN - markdown 编辑器模板</center>**Markdown 编辑器**欢迎页。## 1. 功能拓展与语法支持Markdown 编辑器功能拓展与语法支持：1. 在创作中心设置代码高亮样式，Markdown **将代码片显示选择的高亮样式**进行展示。2. **图片拖拽**功能，可以将本地的图片直接拖拽到编辑区域直接展示。3. **KaTeX 数学公式**。4. **甘特图的 mermaid 语法[^1]** 功能。5. **多屏幕编辑** Markdown 文章。6. **焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置**等功能，功能按钮位于编辑区域与预览区域中间。7. **检查列表** 功能。[^1]: [mermaid 语法说明](https://mermaidjs.github.io/)## 2. 功能快捷键撤销：<kbd>Ctrl</kbd> + <kbd>Z</kbd>
重做：<kbd>Ctrl</kbd> + <kbd>Y</kbd>
加粗：<kbd>Ctrl</kbd> + <kbd>B</kbd>
斜体：<kbd>Ctrl</kbd> + <kbd>I</kbd>
标题：<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd>
无序列表：<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd>
有序列表：<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd>
检查列表：<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>
插入代码：<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd>
插入链接：<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
插入图片：<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd>## 3. 创建标题，生成目录输入 1 次 <kbd>#</kbd>，并按下 <kbd>space</kbd> 后，将生成 1 级标题。
输入 2 次 <kbd>#</kbd>，并按下 <kbd>space</kbd> 后，将生成 2 级标题。
以此类推，我们支持 6 级标题。
可以使用 `TOC` 语法生成一个完美的目录。## 4. 如何改变文本的样式*强调文本* _强调文本_**加粗文本** __加粗文本__==标记文本==~~删除文本~~> 引用文本H~2~O 是液体。2^10^ 运算结果是 1024。## 5. 插入链接与图片链接：[link](https://mp.csdn.net).图片：设置尺寸的图片：居中的图片：居中且设置尺寸的图片：图片拖拽功能。## 6. 插入代码片[博客设置](https://mp.csdn.net/configure)页面，设置代码片高亮样式。\```javascript
// An highlighted block
var foo = 'bar';
\```
(请删除\```前面的\。)## 7. 生成列表- 项目- 项目- 项目1. 项目 1
2. 项目 2
3. 项目 3- [ ] 计划任务
- [x] 完成任务## 8. 创建一个表格Key | Value
------ | ------
Forever | Yong
Strong | Qiang
Cheng | Cheng ### 8.1 内容居中、居左、居右使用 `:---------:` 居中
使用 `:----------` 居左
使用 `----------:` 居右| 第一列 | 第二列 | 第三列 |
|:-----------:| -----------:|:----------- |
| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 | ### 8.2 SmartyPantsSmartyPants 将 ASCII 标点字符转换为智能印刷标点 HTML 实体。| TYPE | ASCII |HTML
| ------ | ------ | ------ |
| Single backticks | `'Isn't this fun?'` | 'Isn't this fun?' |
| Quotes | `"Isn't this fun?"` | "Isn't this fun?" |
| Dashes | `-- is en-dash, --- is em-dash` | -- is en-dash, --- is em-dash |\```
quote [kwəʊt]：vt. 报价，引述，举证 vi. 报价，引用，引证 n. 引用
dash [dæʃ]：n. 猛冲，匆忙，少量，些许，破折号，短跑，气魄，长划，断奏符，仪表板，炫耀 vt. 猛冲，猛撞，猛击，赶紧离开，破灭，气馁，泼溅 int. 该死的，讨厌
backticks：倒引号
\```
(请删除\```前面的\。)## 9. 自定义列表Markdown
: Text-to-HTML conversion tool.Authors
: John
: Luke## 10. 注脚具有注脚的文本。[^2][^2]: 注脚位置## 11. 注释Markdown 将文本转换为 HTML。*[HTML]: 超文本标记语言## 12. KaTeX 数学公式渲染 LaTeX 数学表达式 [KaTeX](https://khan.github.io/KaTeX/):Gamma 公式展示 $\Gamma(n) = (n-1)!\quad\forall
n\in\mathbb N$ 通过欧拉积分$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$> 更多的信息 **LaTeX** 数学表达式 [HERE][1].## 13. 甘特图\```mermaid
ganttdateFormat YYYY-MM-DDtitle Gantt Chartsection 现有任务已完成 :done, des1, 2014-01-06,2014-01-08进行中 :active, des2, 2014-01-09, 3d计划一 : des3, after des2, 5d计划二 : des4, after des3, 5d
\```
(请删除\```前面的\。)- **甘特图**语法，参考 [HERE][2]。## 14. UML 图表可以使用 UML 图表进行渲染 [Mermaid](https://mermaidjs.github.io/)。\```mermaid
sequenceDiagram
张三 ->> 李四: 你好！李四，最近怎么样？
李四 -->> 王五: 你最近怎么样，王五？
李四 --x 张三: 我很好，谢谢！
李四 -x 王五: 我很好，谢谢！
Note right of 王五: 李四想了很长时间，<br/>文字太长了，<br/>不适合放在一行。李四-->>张三: 打量着王五......
张三->>王五: 很好......王五，你怎么样？
\```
(请删除\```前面的\。)产生一个流程图。\```mermaid
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
\```
(请删除\```前面的\。)- **Mermaid**语法，参考 [HERE][3]。## 15. FlowChart 流程图FlowChart 流程图\```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 操作
cond=>condition: 确认？st->op->cond
cond(yes)->e
cond(no)->op
\```
(请删除\```前面的\。)- **FlowChart 流程图**语法，参考 [HERE][4]。## 16. 导出与导入### 16.1 导出当你完成了一篇文章的写作，在上方工具栏找到**文章导出** ，生成一个 `.md` 文件或者 `.html` 文件保存本地。### 16.2 导入如果你想加载一篇写过的 `.md` 文件或者 `.html` 文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，继续创作。[1]: http://www.math.harvard.edu/texman/texman.html[2]: https://mermaidjs.github.io/[3]: https://mermaidjs.github.io/[4]: http://flowchart.js.org/
Markdown 编辑器欢迎页。
1. 功能拓展与语法支持
Markdown 编辑器功能拓展与语法支持：
- 在创作中心设置代码高亮样式，Markdown 将代码片显示选择的高亮样式进行展示。
- 图片拖拽功能，可以将本地的图片直接拖拽到编辑区域直接展示。
- KaTeX 数学公式。
- 甘特图的 mermaid 语法1 功能。
- 多屏幕编辑 Markdown 文章。
- 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置等功能，功能按钮位于编辑区域与预览区域中间。
- 检查列表 功能。
2. 功能快捷键
撤销：Ctrl + Z
重做：Ctrl + Y
加粗：Ctrl + B
斜体：Ctrl + I
标题：Ctrl + Shift + H
无序列表：Ctrl + Shift + U
有序列表：Ctrl + Shift + O
检查列表：Ctrl + Shift + C
插入代码：Ctrl + Shift + K
插入链接：Ctrl + Shift + L
插入图片：Ctrl + Shift + G
3. 创建标题，生成目录
输入 1 次 #，并按下 space 后，将生成 1 级标题。
输入 2 次 #，并按下 space 后，将生成 2 级标题。
以此类推，我们支持 6 级标题。
可以使用 TOC 语法生成一个完美的目录。
4. 如何改变文本的样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
引用文本
H2O 是液体。
210 运算结果是 1024。
5. 插入链接与图片
链接：link.
图片：
设置尺寸的图片：
居中的图片：
居中且设置尺寸的图片：
图片拖拽功能。
6. 插入代码片
博客设置页面，设置代码片高亮样式。
// An highlighted block
var foo = 'bar';
7. 生成列表
- 项目
- 项目
- 项目
- 项目
- 项目 1
- 项目 2
- 项目 3
- 计划任务
- 完成任务
8. 创建一个表格
| Key | Value |
|---|---|
| Forever | Yong |
| Strong | Qiang |
| Cheng | Cheng |
8.1 内容居中、居左、居右
使用 :---------: 居中
使用 :---------- 居左
使用 ----------: 居右
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
8.2 SmartyPants
SmartyPants 将 ASCII 标点字符转换为智能印刷标点 HTML 实体。
| TYPE | ASCII | HTML |
|---|---|---|
| Single backticks | 'Isn't this fun?' | ‘Isn’t this fun?’ |
| Quotes | "Isn't this fun?" | “Isn’t this fun?” |
| Dashes | -- is en-dash, --- is em-dash | – is en-dash, — is em-dash |
quote [kwəʊt]：vt. 报价，引述，举证 vi. 报价，引用，引证 n. 引用
dash [dæʃ]：n. 猛冲，匆忙，少量，些许，破折号，短跑，气魄，长划，断奏符，仪表板，炫耀 vt. 猛冲，猛撞，猛击，赶紧离开，破灭，气馁，泼溅 int. 该死的，讨厌
backticks：倒引号
9. 自定义列表
- Markdown
- Text-to- HTML conversion tool. Authors
- John
- Luke
10. 注脚
具有注脚的文本。2
11. 注释
Markdown 将文本转换为 HTML。
12. KaTeX 数学公式
渲染 LaTeX 数学表达式 KaTeX:
Gamma 公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 通过欧拉积分
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.
更多的信息 LaTeX 数学表达式 HERE.
13. 甘特图
- 甘特图语法，参考 HERE。
14. UML 图表
可以使用 UML 图表进行渲染 Mermaid。
产生一个流程图。
- Mermaid语法，参考 HERE。
15. FlowChart 流程图
FlowChart 流程图
- FlowChart 流程图语法，参考 HERE。
16. 导出与导入
16.1 导出
当你完成了一篇文章的写作，在上方工具栏找到文章导出 ，生成一个 .md 文件或者 .html 文件保存本地。
16.2 导入
如果你想加载一篇写过的 .md 文件或者 .html 文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，继续创作。
References
mermaid 语法说明 ↩︎
注脚位置 ↩︎
