CSDN Markdown帮助文档

迈不过友情╰ 2022-10-19 05:32 185阅读 0赞

> CSDN的MARKDOWN标记文档写的真挺好的，各种DEMO全都有，因为常用，所以给转载了，调整了一下格式，让内容与效果同时展示，方便查阅

## 一、标题 ##

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

# 1级标题
    
    ## 2级标题
    
    ### 3级标题
    
    #### 四级标题
    
    ##### 五级标题
    
    ###### 陆级标题

# 1级标题 #

## 2级标题 ##

### 3级标题 ###

#### 四级标题 ####

##### 五级标题 #####

###### 陆级标题 ######

## 二、文本样式 ##

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

*强调文本* _强调文本_
    
    **加粗文本** __加粗文本__
    
    ==标记文本==
    
    ~~删除文本~~
    
    > 引用文本
    
    H~2~O is是液体。
    
    2^10^ 运算结果是 1024。

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

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

标记文本

删除文本

> 引用文本

H2O is是液体。

210 运算结果是 1024。

## 三、列表 ##

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

- 项目
    
    * 项目
    
    + 项目
    
    1. 项目1
    
    2. 项目2
    
    3. 项目3
    
    - [ ] 计划任务
    
    - [x] 完成任务

*  项目

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

*  计划任务
 *  完成任务

## 四、链接 ##

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

链接: [link](https://mp.csdn.net).
    
    图片: ![Alt](/images/20221005/5195473055774ef7a1b9e34149335892.png)
    
    带尺寸的图片: ![Alt](/images/20221005/5195473055774ef7a1b9e34149335892.png# =30x30)

链接: [link][].

图片: ![Alt][]

带尺寸的图片: ![Alt][Alt 1]

## 五、代码片 ##

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

```
    
    // A code block
    
    var foo = 'bar';
    
    ```
    
    ```javascript
    
    // An highlighted block
    
    var foo = 'bar';
    
    ```

下面展示一些 `内联代码片`。

// A code block
    
    var foo = 'bar';

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

1.  代码片必须手动声明代码语言类型
2.  目前支持代码类型: `markup`、`html`、`svg`、`xml`、`c`、`clike`、`cpp`、`csharp`、`java`、`vbnet`、`go`、`ruby/rb`、`python/py`、`php`、`sql`、`perl`、`objectivec`、`swift`、`javascript/js`、`css`、`handlebars`、`bash`、`kotlin`
3.  代码片主题

默认主题为：Atom One Dark

可以前往 [**写作中心/博客设置**][Link 1] 在**代码片样式**项进行更改

## 六、表格 ##

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

项目 | Value
    
    -------- | -----
    
    电脑 | $1600
    
    手机 | $12
    
    导管 | $1
    
    
    | Column 1 | Column 2 |
    
    |:--------:| -------------:|
    
    | centered 文本居中 | right-aligned 文本居右 |

<table> 
 <thead> 
  <tr> 
   <th>项目</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>电脑</td> 
   <td>$1600</td> 
  </tr> 
  <tr> 
   <td>手机</td> 
   <td>$12</td> 
  </tr> 
  <tr> 
   <td>导管</td> 
   <td>$1</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="center">Column 1</th> 
   <th align="right">Column 2</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">centered 文本居中</td> 
   <td align="right">right-aligned 文本居右</td> 
  </tr> 
 </tbody> 
</table>

## 七、自定义列表 ##

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

Markdown
    	
    	: Text-to-HTML conversion tool
    	
    Authors
    	
    	: John
    	
    	: Luke

Markdown

Text-to-HTML conversion tool

Authors

John

Luke

## 八、插入甘特图 ##

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

```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
    
    ```

Mon 06Mon 13已完成 进行中 计划中现有任务Adding GANTT diagram functionality to mermaid

## 九、插入UML图 ##

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

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

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

## 十、插入Mermaid流程图 ##

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

```mermaid
    
    graph LR
    
    A[长方形] -- 链接 --> B((圆))
    
    A --> C(圆角长方形)
    
    B --> D{菱形}
    
    C --> D
    
    ```

链接

长方形

圆

圆角长方形

菱形

## 十一、插入Flowchart流程图 ##

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

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

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

[link]: https://mp.csdn.net
[Alt]: /images/20221005/5195473055774ef7a1b9e34149335892.png
[Alt 1]: /images/20221005/5195473055774ef7a1b9e34149335892.png#
[Link 1]: https://mp.csdn.net/configure