CSDN - markdown 编辑器模板

CSDN - markdown 编辑器模板

Markdown 编辑器欢迎页。

1. 功能拓展与语法支持

Markdown 编辑器功能拓展与语法支持：

1. 在创作中心设置代码高亮样式，Markdown 将代码片显示选择的高亮样式进行展示。
2. 图片拖拽功能，可以将本地的图片直接拖拽到编辑区域直接展示。
3. KaTeX 数学公式。
4. 甘特图的 mermaid 语法¹ 功能。
5. 多屏幕编辑 Markdown 文章。
6. 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置等功能，功能按钮位于编辑区域与预览区域中间。
7. 检查列表 功能。

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. 如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O 是液体。

2¹⁰ 运算结果是 1024。

5. 插入链接与图片

链接：link.

图片：

设置尺寸的图片：

居中的图片：

居中且设置尺寸的图片：

图片拖拽功能。

6. 插入代码片

博客设置页面，设置代码片高亮样式。

// An highlighted block
var foo = 'bar';

7. 生成列表

• 项目
  • 项目
    • 项目

1. 项目 1
2. 项目 2
3. 项目 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. 注脚

具有注脚的文本。²

11. 注释

Markdown 将文本转换为 HTML。

12. KaTeX 数学公式

渲染 LaTeX 数学表达式 KaTeX:

Gamma 公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

更多的信息 LaTeX 数学表达式 HERE.

13. 甘特图

Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Gantt Chart

• 甘特图语法，参考 HERE。

14. UML 图表

可以使用 UML 图表进行渲染 Mermaid。

张三 李四 王五 你好！李四，最近怎么样？ 你最近怎么样，王五？ 我很好，谢谢！ 我很好，谢谢！ 李四想了很长时间， 文字太长了， 不适合放在一行。 打量着王五...... 很好......王五，你怎么样？ 张三 李四 王五

产生一个流程图。

链接

长方形

圆

圆角长方形

菱形

• Mermaid语法，参考 HERE。

15. FlowChart 流程图

FlowChart 流程图

Created with Raphaël 2.2.0 开始 操作 确认？ 结束 yes no

• FlowChart 流程图语法，参考 HERE。

16. 导出与导入

16.1 导出

当你完成了一篇文章的写作，在上方工具栏找到文章导出 ，生成一个 .md 文件或者 .html 文件保存本地。

16.2 导入

如果你想加载一篇写过的 .md 文件或者 .html 文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，继续创作。

---

1. mermaid 语法说明 ↩︎

2. 注脚位置 ↩︎