CSDN Markdown编辑器编辑教程

快捷键

- 加粗    `Ctrl + B` - 斜体    `Ctrl + I` - 引用    `Ctrl + Q`- 插入链接    `Ctrl + L`- 插入代码    `Ctrl + K`- 插入图片    `Ctrl + G`- 提升标题    `Ctrl + H`- 有序列表    `Ctrl + O`- 无序列表    `Ctrl + U`- 横线    `Ctrl + R`- 撤销    `Ctrl + Z`- 重做    `Ctrl + Y`

文字样式设置（字体, 大小, 颜色, 高亮底色）内嵌HTML

Size：规定文本的尺寸大小，取值从 1 到 7 ，浏览器默认值是 3.

<font color=#0099ff size=3 face="微软雅黑">color=#0099ff size=3 face="微软雅黑"
</font>

color=#0099ff size=3 face="微软雅黑"

表格

Markdown　Extra　表格语法：

title1     | title2
-------- | ---
name | 111
name | 222
name | 333

title1	title2
name	111
name	222
name	333

可以使用冒号来定义对齐方式：

title1     | title2 | title3
:-------- | ---: | :---: |
name | 111 | 111
name | 222 | 222
name | 333 | 333

title1	title2	title3
name	111	111
name	222	222
name	333	333

html嵌入

<table><tr><td bgcolor=PowderBlue>title</td><td bgcolor=PowderBlue>desc</td></tr><tr><td>name</td><td >小小</td></tr><tr><td>name</td><td>小小</td></tr>
</table>

title	desc
name	小小
name	小小

定义列表

Markdown　Extra　定义列表语法：

项目１
: 定义 A
: 定义 B项目２
: 定义 C: 定义 D: > 定义D内容

项目１: 定义 A; 定义 B
项目 2: 定义 C; 定义 D; 定义D内容

代码块

类型： css,html,js

.box{color: red;
}

<div>hello</div>

function () {alert('hello');
}

脚注

生成一个[^footnote1]脚注[^footnote2].[^footnote1]: 这里是 **脚注** 的 *内容*.[^footnote2]: 这里是 **脚注** 的 *内容*.

生成一个¹脚注².

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

- 行内公式，数学公式为：$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$。- 块级公式：
$$  x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

行内公式，数学公式为：Γ(n)=(n−1)!∀n∈N\Gamma(n) = (n-1)!\quad\forall n\in\mathbb NΓ(n)=(n−1)!∀n∈N。
块级公式：
x=−b±b2−4ac2ax = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} x=2a−b±b2−4ac

UML 图:

序列图：

[删掉]```mermaid
sequenceDiagram
张三->>李四: 嘿，小四儿, 写博客了没?
Note right of 李四: 李四愣了一下，说：
李四-->>张三: 忙得吐血，哪有时间写。
[删掉]```

#mermaid-svg-5h9d3rizBOYC9hRd .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-5h9d3rizBOYC9hRd .label text{fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd .node rect,#mermaid-svg-5h9d3rizBOYC9hRd .node circle,#mermaid-svg-5h9d3rizBOYC9hRd .node ellipse,#mermaid-svg-5h9d3rizBOYC9hRd .node polygon,#mermaid-svg-5h9d3rizBOYC9hRd .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-5h9d3rizBOYC9hRd .node .label{text-align:center;fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd .node.clickable{cursor:pointer}#mermaid-svg-5h9d3rizBOYC9hRd .arrowheadPath{fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-5h9d3rizBOYC9hRd .flowchart-link{stroke:#333;fill:none}#mermaid-svg-5h9d3rizBOYC9hRd .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-5h9d3rizBOYC9hRd .edgeLabel rect{opacity:0.9}#mermaid-svg-5h9d3rizBOYC9hRd .edgeLabel span{color:#333}#mermaid-svg-5h9d3rizBOYC9hRd .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-5h9d3rizBOYC9hRd .cluster text{fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-5h9d3rizBOYC9hRd .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-5h9d3rizBOYC9hRd text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-5h9d3rizBOYC9hRd .actor-line{stroke:grey}#mermaid-svg-5h9d3rizBOYC9hRd .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-5h9d3rizBOYC9hRd .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-5h9d3rizBOYC9hRd #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-5h9d3rizBOYC9hRd .sequenceNumber{fill:#fff}#mermaid-svg-5h9d3rizBOYC9hRd #sequencenumber{fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd #crosshead path{fill:#333;stroke:#333}#mermaid-svg-5h9d3rizBOYC9hRd .messageText{fill:#333;stroke:#333}#mermaid-svg-5h9d3rizBOYC9hRd .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-5h9d3rizBOYC9hRd .labelText,#mermaid-svg-5h9d3rizBOYC9hRd .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-5h9d3rizBOYC9hRd .loopText,#mermaid-svg-5h9d3rizBOYC9hRd .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-5h9d3rizBOYC9hRd .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-5h9d3rizBOYC9hRd .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-5h9d3rizBOYC9hRd .noteText,#mermaid-svg-5h9d3rizBOYC9hRd .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-5h9d3rizBOYC9hRd .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-5h9d3rizBOYC9hRd .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-5h9d3rizBOYC9hRd .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-5h9d3rizBOYC9hRd .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-5h9d3rizBOYC9hRd .section{stroke:none;opacity:0.2}#mermaid-svg-5h9d3rizBOYC9hRd .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-5h9d3rizBOYC9hRd .section2{fill:#fff400}#mermaid-svg-5h9d3rizBOYC9hRd .section1,#mermaid-svg-5h9d3rizBOYC9hRd .section3{fill:#fff;opacity:0.2}#mermaid-svg-5h9d3rizBOYC9hRd .sectionTitle0{fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd .sectionTitle1{fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd .sectionTitle2{fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd .sectionTitle3{fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-5h9d3rizBOYC9hRd .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-5h9d3rizBOYC9hRd .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-5h9d3rizBOYC9hRd .grid path{stroke-width:0}#mermaid-svg-5h9d3rizBOYC9hRd .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-5h9d3rizBOYC9hRd .task{stroke-width:2}#mermaid-svg-5h9d3rizBOYC9hRd .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-5h9d3rizBOYC9hRd .taskText:not([font-size]){font-size:11px}#mermaid-svg-5h9d3rizBOYC9hRd .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-5h9d3rizBOYC9hRd .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-5h9d3rizBOYC9hRd .task.clickable{cursor:pointer}#mermaid-svg-5h9d3rizBOYC9hRd .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-5h9d3rizBOYC9hRd .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-5h9d3rizBOYC9hRd .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-5h9d3rizBOYC9hRd .taskText0,#mermaid-svg-5h9d3rizBOYC9hRd .taskText1,#mermaid-svg-5h9d3rizBOYC9hRd .taskText2,#mermaid-svg-5h9d3rizBOYC9hRd .taskText3{fill:#fff}#mermaid-svg-5h9d3rizBOYC9hRd .task0,#mermaid-svg-5h9d3rizBOYC9hRd .task1,#mermaid-svg-5h9d3rizBOYC9hRd .task2,#mermaid-svg-5h9d3rizBOYC9hRd .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-5h9d3rizBOYC9hRd .taskTextOutside0,#mermaid-svg-5h9d3rizBOYC9hRd .taskTextOutside2{fill:#000}#mermaid-svg-5h9d3rizBOYC9hRd .taskTextOutside1,#mermaid-svg-5h9d3rizBOYC9hRd .taskTextOutside3{fill:#000}#mermaid-svg-5h9d3rizBOYC9hRd .active0,#mermaid-svg-5h9d3rizBOYC9hRd .active1,#mermaid-svg-5h9d3rizBOYC9hRd .active2,#mermaid-svg-5h9d3rizBOYC9hRd .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-5h9d3rizBOYC9hRd .activeText0,#mermaid-svg-5h9d3rizBOYC9hRd .activeText1,#mermaid-svg-5h9d3rizBOYC9hRd .activeText2,#mermaid-svg-5h9d3rizBOYC9hRd .activeText3{fill:#000 !important}#mermaid-svg-5h9d3rizBOYC9hRd .done0,#mermaid-svg-5h9d3rizBOYC9hRd .done1,#mermaid-svg-5h9d3rizBOYC9hRd .done2,#mermaid-svg-5h9d3rizBOYC9hRd .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-5h9d3rizBOYC9hRd .doneText0,#mermaid-svg-5h9d3rizBOYC9hRd .doneText1,#mermaid-svg-5h9d3rizBOYC9hRd .doneText2,#mermaid-svg-5h9d3rizBOYC9hRd .doneText3{fill:#000 !important}#mermaid-svg-5h9d3rizBOYC9hRd .crit0,#mermaid-svg-5h9d3rizBOYC9hRd .crit1,#mermaid-svg-5h9d3rizBOYC9hRd .crit2,#mermaid-svg-5h9d3rizBOYC9hRd .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-5h9d3rizBOYC9hRd .activeCrit0,#mermaid-svg-5h9d3rizBOYC9hRd .activeCrit1,#mermaid-svg-5h9d3rizBOYC9hRd .activeCrit2,#mermaid-svg-5h9d3rizBOYC9hRd .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-5h9d3rizBOYC9hRd .doneCrit0,#mermaid-svg-5h9d3rizBOYC9hRd .doneCrit1,#mermaid-svg-5h9d3rizBOYC9hRd .doneCrit2,#mermaid-svg-5h9d3rizBOYC9hRd .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-5h9d3rizBOYC9hRd .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-5h9d3rizBOYC9hRd .milestoneText{font-style:italic}#mermaid-svg-5h9d3rizBOYC9hRd .doneCritText0,#mermaid-svg-5h9d3rizBOYC9hRd .doneCritText1,#mermaid-svg-5h9d3rizBOYC9hRd .doneCritText2,#mermaid-svg-5h9d3rizBOYC9hRd .doneCritText3{fill:#000 !important}#mermaid-svg-5h9d3rizBOYC9hRd .activeCritText0,#mermaid-svg-5h9d3rizBOYC9hRd .activeCritText1,#mermaid-svg-5h9d3rizBOYC9hRd .activeCritText2,#mermaid-svg-5h9d3rizBOYC9hRd .activeCritText3{fill:#000 !important}#mermaid-svg-5h9d3rizBOYC9hRd .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-5h9d3rizBOYC9hRd g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-5h9d3rizBOYC9hRd g.classGroup text .title{font-weight:bolder}#mermaid-svg-5h9d3rizBOYC9hRd g.clickable{cursor:pointer}#mermaid-svg-5h9d3rizBOYC9hRd g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-5h9d3rizBOYC9hRd g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-5h9d3rizBOYC9hRd .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-5h9d3rizBOYC9hRd .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-5h9d3rizBOYC9hRd .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-5h9d3rizBOYC9hRd .dashed-line{stroke-dasharray:3}#mermaid-svg-5h9d3rizBOYC9hRd #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-5h9d3rizBOYC9hRd #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-5h9d3rizBOYC9hRd #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-5h9d3rizBOYC9hRd #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-5h9d3rizBOYC9hRd #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-5h9d3rizBOYC9hRd #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-5h9d3rizBOYC9hRd #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-5h9d3rizBOYC9hRd #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-5h9d3rizBOYC9hRd .commit-id,#mermaid-svg-5h9d3rizBOYC9hRd .commit-msg,#mermaid-svg-5h9d3rizBOYC9hRd .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-5h9d3rizBOYC9hRd .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-5h9d3rizBOYC9hRd .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-5h9d3rizBOYC9hRd g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-5h9d3rizBOYC9hRd g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-5h9d3rizBOYC9hRd g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-5h9d3rizBOYC9hRd g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-5h9d3rizBOYC9hRd g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-5h9d3rizBOYC9hRd .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-5h9d3rizBOYC9hRd .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-5h9d3rizBOYC9hRd .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-5h9d3rizBOYC9hRd .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-5h9d3rizBOYC9hRd .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-5h9d3rizBOYC9hRd .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-5h9d3rizBOYC9hRd .edgeLabel text{fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-5h9d3rizBOYC9hRd .node circle.state-start{fill:black;stroke:black}#mermaid-svg-5h9d3rizBOYC9hRd .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-5h9d3rizBOYC9hRd #statediagram-barbEnd{fill:#9370db}#mermaid-svg-5h9d3rizBOYC9hRd .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-5h9d3rizBOYC9hRd .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-5h9d3rizBOYC9hRd .statediagram-state .divider{stroke:#9370db}#mermaid-svg-5h9d3rizBOYC9hRd .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-5h9d3rizBOYC9hRd .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-5h9d3rizBOYC9hRd .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-5h9d3rizBOYC9hRd .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-5h9d3rizBOYC9hRd .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-5h9d3rizBOYC9hRd .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-5h9d3rizBOYC9hRd .note-edge{stroke-dasharray:5}#mermaid-svg-5h9d3rizBOYC9hRd .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-5h9d3rizBOYC9hRd .error-icon{fill:#522}#mermaid-svg-5h9d3rizBOYC9hRd .error-text{fill:#522;stroke:#522}#mermaid-svg-5h9d3rizBOYC9hRd .edge-thickness-normal{stroke-width:2px}#mermaid-svg-5h9d3rizBOYC9hRd .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-5h9d3rizBOYC9hRd .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-5h9d3rizBOYC9hRd .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-5h9d3rizBOYC9hRd .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-5h9d3rizBOYC9hRd .marker{fill:#333}#mermaid-svg-5h9d3rizBOYC9hRd .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-5h9d3rizBOYC9hRd {color: rgba(0, 0, 0, 0.75);font: ;}张三李四嘿，小四儿, 写博客了没?李四愣了一下，说：忙得吐血，哪有时间写。张三李四

流程图：

[删掉]```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？st->op->cond
cond(yes)->e
cond(no)->op
[删掉]```

Created with Raphaël 2.2.0开始我的操作确认？结束yesno

关于序列图语法，参考这儿,
关于流程图语法，参考这儿.

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。

用户可以选择把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

常见颜色

color=maroon
color=grey
color=silver
color=lightgrey
color=HotPink
color=DeepPink
color=VioletRed
color=Purple
color=navy
color=Blue
color=DeepSkyBlue
color=LightSkyBlue
color=aqua
color=DarkTurquoise（#00CED1）
color=LightSeaGreen
color=YellowGreen
color=LawnGreen
color=GreenYellow
color=Yellow
color=Tomato
color=red
color=fuchsia
color=MediumOrchid
color=DarkViolet

这里是脚注的内容. ↩︎
这里是脚注的内容. ↩︎