csdn的markdown编辑器基本语法（整理版）

0 文章目录名

  @[TOC](文章目录名)

1 标题

• 一级标题:行首# 标题名称 或者 <h1>标题名称</h1>
• 二级标题:行首## 标题名称 或者 <h2>标题名称</h2>
• 三级标题:行首### 标题名称 或者 <h3>标题名称</h3>
  最高支持6级标题.

2 字体设置

• 字体加粗: **加粗字体**
• 字体下标:<sub>字体下标</sub>
• 字体上标:<sup>上标字体</sup>
• 字体大小、颜色、字号:<font color="green" size=7 face="黑体">文本内容</font>

3 文本设置

• 文本强调:*强调文本*
• 标记文本:==标记文本==
• 删除文本:~~删除文本~~
• 引用文本:>引用文本
• 空格缩进： 
• 注释文本：*[文本内容]:注释内容

4 按键展示

  <kbd>按键名</kbd>

5 功能快捷键

• 撤销：Ctrl/Command + Z
• 重做：Ctrl/Command + Y
• 加粗：Ctrl/Command + B
• 斜体：Ctrl/Command + I
• 标题：Ctrl/Command + Shift + H
• 无序列表：Ctrl/Command + Shift + U
• 有序列表：Ctrl/Command + Shift + O
• 检查列表：Ctrl/Command + Shift + C
• 插入代码：Ctrl/Command + Shift + K
• 插入链接：Ctrl/Command + Shift + L
• 插入图片：Ctrl/Command + Shift + G

6 生成适合的列表

• 项目：- 项目
  • 项目：- 项目
    • 项目：- 项目

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

• 计划任务：- [ ] 计划任务
• 完成任务：- [x] 完成任务

7 插入链接与图片

• 链接：[链接替换名](url)
• 注脚：[^数字]
   [^数字]: 注脚的解释
• 图片：<img src="https://img-blog.csdn.net/20181024223739122?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25ld19kZWxldGVf/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt=""/>
• 图片大小调整：<img src="....." width="数字" height="数字" alt=""/>
• 图片位置居中：<center><img ...../></center>（文字居中也适用）
• 页面内跳转：[文本](#idname)，id设置：
  • 标题里：<h2 id="target>1 介绍</h2>
  • 正文里：<span id="target>正文内容</span>

8 插入代码段

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

在markdown编辑器中输入：

```javascript
// An highlighted block
var foo = 'bar';
```(注意：末尾不要忘记```)

9 创建表格

9.1 创建简单表格

项目	Value
电脑	$1600
手机	$12
导管	$1

在markdown编辑器中输入：

项目  | Value
----- | -----
电脑  | $1600
手机  | $12
导管  | $1

• 设定内容居中、居左、居右
  • 居中：:---------:
  • 居左：:---------
  • 居右：---------:

第一列	第二列	第三列
居中	居左	居右

9.2 html表格

• <table>标签定义表格；
• <tr>标签定义行；（table row）
• <td>标签定义数据单元格内容（列）。（table data）
• 带图片表格示例：

	ResumeF8：运行到下一个断点
	Suspend Thread：进程挂起
	Terminate Ctrl+F2：停止调试
	Step Into F5
	Step Over F6
	Step Return F7

其html代码如下：

<table>
    <tr >
        <td width=50>
	    <img src="https://img-blog.csdnimg.cn/20181109163111511.png"   alt="">	
	</td>
	<td align=left >
	    Resume<kbd>F8</kbd>：运行到下一个断点
	</td>
    </tr>
    <tr>
        <td width=50 >
	    <img src="https://img-blog.csdnimg.cn/20181109161735466.png" alt="">	
	</td>
	<td align=left >
	    Suspend Thread：进程挂起
	</td>
    </tr>
    <tr>
	<td width=50 >
	    <img src="https://img-blog.csdnimg.cn/20181109163214424.png" alt="">	
	</td>
	<td align=left >
	    Terminate <kbd>Ctrl</kbd>+<kbd>F2</kbd>：停止调试
	</td>
    </tr>
    <tr>
	<td width=50 >
	    <img src="https://img-blog.csdnimg.cn/20181109164350918.png" alt="">	
	</td>
	<td align=left >
	    Step Into <kbd>F5</kbd>
	</td>
    </tr>
    <tr >
	<td width=50 >
	    <img src="https://img-blog.csdnimg.cn/20181109164523709.png" alt="">	
	</td>
	<td align=left >
	    Step Over <kbd>F6</kbd>
	</td>
    </tr>
    <tr >
	<td width=50 >
	    <img src="https://img-blog.csdnimg.cn/2018110916464598.png" alt="">	
	</td>
	<td align=left >
	    Step Return <kbd>F7</kbd>
	</td>
    </tr>
</table>

10 UML 图表

10.1 序列图：

在markdown编辑器中输入：

```mermaid
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
李四-->>王五: 你最近怎么样，王五？
李四--x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
```(注意：末尾不要忘记```)

10.2 普通流程图:

在markdown编辑器中输入：

```mermaid
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
```(注意：末尾不要忘记```)

• 关于 Mermaid 语法，参考 这儿.

10.3 FLowchart流程图

语法：

• 定义元素：tag=>type: content:>url
• 连接元素：->
  标签：主要6种

  start
  end
  operation
  subroutine
  condition
  inputoutput

在markdown编辑器中输入：

```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op(right)->cond
cond(yes)->e
cond(no)->op
```(注意：末尾不要忘记```)

• 关于 Flowchart流程图 语法，参考 这儿.

10.4 甘特图

在markdown编辑器中输入：

```mermaid
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划一               :         des3, after des2, 5d
        计划二               :         des4, after des3, 5d
```(注意：末尾不要忘记```)

• 关于 甘特图 语法，参考 这儿.

11 KaTeX数学公式

可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$
上面两个数学公式分别是$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$、$$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$

你可以找到更多关于的信息 LaTeX 数学表达式here.