CSDN - markdown 编辑器模板

雨点打透心脏的1/2处 2022-01-28 15:43 420阅读 0赞

#  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).
    
    图片：![Alt](/images/20220128/17b8a3f3a67243c3aee4e7a5bea65184.png)
    
    设置尺寸的图片：![Alt](/images/20220128/17b8a3f3a67243c3aee4e7a5bea65184.png# =30x30)
    
    居中的图片：![Alt](/images/20220128/17b8a3f3a67243c3aee4e7a5bea65184.png#pic_center)
    
    居中且设置尺寸的图片：![Alt](/images/20220128/17b8a3f3a67243c3aee4e7a5bea65184.png#pic_center =30x30)
    
    图片拖拽功能。
    
    ## 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 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]
    
    [^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
    gantt
            dateFormat  YYYY-MM-DD
            title Gantt Chart
            section 现有任务
            已完成               :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 编辑器功能拓展与语法支持：

1.  在创作中心设置代码高亮样式，Markdown **将代码片显示选择的高亮样式**进行展示。
2.  **图片拖拽**功能，可以将本地的图片直接拖拽到编辑区域直接展示。
3.  **KaTeX 数学公式**。
4.  **甘特图的 mermaid 语法1** 功能。
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. 如何改变文本的样式 ##

*强调文本* *强调文本*

**加粗文本** **加粗文本**

标记文本

删除文本

> 引用文本

H2O 是液体。

210 运算结果是 1024。

## 5. 插入链接与图片 ##

链接：[link][].

图片：![Alt][]

设置尺寸的图片：![Alt][Alt 1]

居中的图片：![Alt][Alt 2]

居中且设置尺寸的图片：![Alt][Alt 2]

图片拖拽功能。

## 6. 插入代码片 ##

[博客设置][Link 1]页面，设置代码片高亮样式。

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

## 7. 生成列表 ##

*  项目
    
     *  项目
        
         *  项目

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

*  计划任务
 *  完成任务

## 8. 创建一个表格 ##

<table> 
 <thead> 
  <tr> 
   <th>Key</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Forever</td> 
   <td>Yong</td> 
  </tr> 
  <tr> 
   <td>Strong</td> 
   <td>Qiang</td> 
  </tr> 
  <tr> 
   <td>Cheng</td> 
   <td>Cheng</td> 
  </tr> 
 </tbody> 
</table>

### 8.1 内容居中、居左、居右 ###

使用 `:---------:` 居中  
使用 `:----------` 居左  
使用 `----------:` 居右

<table> 
 <thead> 
  <tr> 
   <th align="center">第一列</th> 
   <th align="right">第二列</th> 
   <th align="left">第三列</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">第一列文本居中</td> 
   <td align="right">第二列文本居右</td> 
   <td align="left">第三列文本居左</td> 
  </tr> 
 </tbody> 
</table>

### 8.2 SmartyPants ###

SmartyPants 将 ASCII 标点字符转换为智能印刷标点 HTML 实体。

<table> 
 <thead> 
  <tr> 
   <th>TYPE</th> 
   <th>ASCII</th> 
   <th>HTML</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Single backticks</td> 
   <td><code>'Isn't this fun?'</code></td> 
   <td>‘Isn’t this fun?’</td> 
  </tr> 
  <tr> 
   <td>Quotes</td> 
   <td><code>"Isn't this fun?"</code></td> 
   <td>“Isn’t this fun?”</td> 
  </tr> 
  <tr> 
   <td>Dashes</td> 
   <td><code>-- is en-dash, --- is em-dash</code></td> 
   <td>– is en-dash, — is em-dash</td> 
  </tr> 
 </tbody> 
</table>

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. 甘特图 ##

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

*  **甘特图**语法，参考 [HERE][HERE 1]。

## 14. UML 图表 ##

可以使用 UML 图表进行渲染 [Mermaid][HERE 1]。

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

产生一个流程图。

链接

长方形

圆

圆角长方形

菱形

*  **Mermaid**语法，参考 [HERE][HERE 1]。

## 15. FlowChart 流程图 ##

FlowChart 流程图

Created with Raphaël 2.3.0开始操作确认？结束yesno

*  **FlowChart 流程图**语法，参考 [HERE][HERE 2]。

## 16. 导出与导入 ##

### 16.1 导出 ###

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

### 16.2 导入 ###

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

## References ##

--------------------

1.  [mermaid 语法说明][HERE 1] ↩︎
2.  注脚位置 ↩︎

[link]: https://mp.csdn.net
[Alt]: /images/20220128/17b8a3f3a67243c3aee4e7a5bea65184.png
[Alt 1]: /images/20220128/17b8a3f3a67243c3aee4e7a5bea65184.png#
[Alt 2]: /images/20220128/17b8a3f3a67243c3aee4e7a5bea65184.png#pic_center
[Link 1]: https://mp.csdn.net/configure
[KaTeX]: https://khan.github.io/KaTeX/
[HERE]: http://www.math.harvard.edu/texman/texman.html
[HERE 1]: https://mermaidjs.github.io/
[HERE 2]: http://flowchart.js.org/