CSDN Markdown使用详解

文章目录

  • CSDN Markdown使用详解
    • 1 .功能快捷键
    • 2.创建标题目录|列表|任务
    • 3.分割线|高亮|引用|删除文字|引用|注释
    • 4.字体颜色|大小|字体|背景色
    • 5.文字链接|图片超链| 索引超链|自动链接
    • 6.插入代码片
    • 7.UML 图表
    • 8.FLowchart流程图
    • 9.创建一个表格
          • * 设定内容居中、居左、居右
          • * SmartyPants
    • 10.KaTeX数学公式
    • 11.新的甘特图功能,丰富你的文章

CSDN Markdown使用详解

如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。


1 .功能快捷键

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


2.创建标题目录|列表|任务

支持6级标题,使用@[TOC]语法后生成一个完美的目录

一级标题:   行首# 空格    
二级标题:     行首# 空格    

在这里插入图片描述


列表

* 项目  
  * 项目
    * 项目
1. 项目1
2. 项目2
3. 项目3
  • 项目
    • 项目
      • 项目
    1. 项目1
    2. 项目2
    3. 项目3

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

3.分割线|高亮|引用|删除文字|引用|注释

分割线:
***

高亮: ==文字==   

文字


删除文本: ~~删除~~    

删除


注脚:==[^2]  
[^2]: 注脚的解释   

注脚:==1


引用:  
      >  H~2~O is是液体。
      > 2^10^ 运算结果是 1024.  

H2O is是液体。

210 运算结果是 1024.


注释:
Markdown将文本转换为 HTML。  
*[HTML]:   超文本标记语言    

Markdown将文本转换为 HTML。
*[HTML]: 超文本标记语言


4.字体颜色|大小|字体|背景色

我是黑体字  
我是微软雅黑  
我是华文彩云  
我是红色  
我是绿色  
我是蓝色  
我是尺寸  
我是黑体,绿色,尺寸为3
背景色:
背景色yellow
背景色yellow
背景色yellow

我是黑体字
我是微软雅黑
我是华文彩云
我是红色
我是绿色
我是蓝色
我是尺寸
我是黑体,绿色,尺寸为3
背景色:

背景色yellow
背景色yellow
背景色yellow
***

5.文字链接|图片超链| 索引超链|自动链接

文字链接:[链接名](链接地址)  
[markdown语法](https://blog.csdn.net/u011419965/article/details/50536937#%E5%AD%97%E4%BD%93%E5%AD%97%E5%8F%B7%E9%A2%9C%E8%89%B2)  

markdown语法


 图片链接:![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw==#pic_center)


索引超链接: 
I get 10 times more traffic from [Google][1] than from [Yahoo][2] or [MSN][3].  

[1]: http://google.com/        "Google" 
[2]: http://search.yahoo.com/  "Yahoo Search" 
[3]: http://search.msn.com/    "MSN Search"   

I get 10 times more traffic from Google than from Yahoo or MSN.


6.插入代码片

```c
static int __init sensor_init(void)
{
	int res = i2c_add_driver(&sensor_driver);
	struct proc_dir_entry *sensor_proc_entry;
	pr_info("%s: Probe name %s\n", __func__, sensor_driver.driver.name);
	if (res)
		pr_err("%s failed\n", __func__);

	sensor_proc_entry = proc_create("driver/sensor_dbg", 0660, NULL, &sensor_proc_fops);
	printk("%s\n", SENSOR_VERSION_AND_TIME);
	return res;
}
```
static int __init sensor_init(void)
{
	int res = i2c_add_driver(&sensor_driver);
	struct proc_dir_entry *sensor_proc_entry;
	pr_info("%s: Probe name %s\n", __func__, sensor_driver.driver.name);
	if (res)
		pr_err("%s failed\n", __func__);

	sensor_proc_entry = proc_create("driver/sensor_dbg", 0660, NULL, &sensor_proc_fops);
	printk("%s\n", SENSOR_VERSION_AND_TIME);
	return res;
}

7.UML 图表

 ```mermaid
sequenceDiagram
Title: Here is a title 
A->>B: Normal line 
B-->>C: Dashed line 
C->>D: Open arrow 
D-->>A: Dashed open arrow
 ```
A B C D Normal line Dashed line Open arrow Dashed open arrow A B C D Here is a title

8.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.2.0 开始 我的操作 确认? 结束 yes no

9.创建一个表格

一个简单的表格是这么创建的:
项目|Value
----|-----
电脑| $1600
手机  | $12
导管  | $1
项目 Value
电脑 $1600
手机 $12
导管 $1

* 设定内容居中、居左、居右
使用`:---------:`居中
使用`:----------`居左
使用`----------:`居右
| 第一列       | 第二列         | 第三列        |
|:-----------:| -------------:|:-------------|
| 第一列文本居中 | 第二列文本居右  | 第三列文本居左 | 

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

10.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数学表达式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n1)!nN 是通过欧拉积分
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=0tz1etdt.

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


11.新的甘特图功能,丰富你的文章

```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
```
Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid

参考文档
1: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
2: https://mermaidjs.github.io/
3: https://mermaidjs.github.io/
[4]: http://adrai.github.io/flowchart.js/
[5]: https://blog.csdn.net/u011419965/article/details/50536937#2-分割线
[6]: https://www.cnblogs.com/tocy/p/markdown-footnote_link.html


  1. 注脚的解释 ↩︎

你可能感兴趣的:(如何写好CSDN博客)