CSDN Markdown使用教程

最新推荐文章于 2024-03-02 17:19:04 发布

Alo_ha

最新推荐文章于 2024-03-02 17:19:04 发布

阅读量279

点赞数 2

分类专栏：工具使用教程文章标签： CSDN markdown

本文链接：https://blog.csdn.net/qq_43133217/article/details/89145567

版权

工具使用教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

生成标题:在文档某处使用 @[toc]，将在此处生成文章目录

快捷键

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

部分快捷键会与浏览器快捷键发生冲突

标题

使用#来标记文本是否为标题，#的数量来标记标题为第几级标题。
总共支持六级标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

文本样式

用星号*、下划线_、等号=、波浪线~控制文本样式

斜体 ---------------用单个星号*或者下划线_包围文
加粗--------------- 用两个星号**或者下划线__包围文本
斜体加粗 ---------用三个星号***或者下划线___包围文本
标记文本 ---------用两个==包围文本
~~删除文本~~ ---------用两个~~包围文本
H_下标 --------------用单个~包围文本
2^上角标 ------------用单个^包围文本

引用块

使用大于号 >或 ` 来标记引用块

一级引用块使用>标记

二级引用块使用>>标记

三级引用块使用>>>标记

代码块前后用三个`包围

这个是一个代码块

同时markdown还指出使用HTML标签，对文本进行编辑
如<kbd>文本</kbd>标签，使用键盘样式显示文本

分割线

用三个`或*或_，所呈现的效果都是一样的

***
---
___

列表

1. 无序列表
使用单个-或+或*标记，与正文间有一个空格。显示都为小圆点

表项
- 嵌套表项
  - 次级嵌套表项

-  表项
	+  嵌套表项
		* 次级嵌套表项

2. 有序列表
使用序号.标记

项目一
1. 子项目一
项目二

1. 项目一
	1. 子项目一
2. 项目二

3. 待办事项
使用- [ ]表示复选框，中括号中填X打勾√

计划任务
完成任务

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

链接

网页链接
语法：[显示文本](链接)

www.baidu.com

[www.baidu.com](https://www.baidu.com)

图片
语法：![未加载图片时显示文本](url)

![太阳](https://i-blog.csdnimg.cn/blog_migrate/0c58c894ed803666740078491e873506.jpeg =50x50)

![固定大小的图片](https://i-blog.csdnimg.cn/blog_migrate/0c58c894ed803666740078491e873506.jpeg =30x30)

![指定位置的图片](https://i-blog.csdnimg.cn/blog_migrate/0c58c894ed803666740078491e873506.jpeg#pic_center =60x60)

通过URL设置图片格式
=length x width 设置图片大小
#pic_center 设置图片对齐方式(当前为居中)

表格

表头	表头
表项	表项
centered 居中	right-aligned 居右

表头|表头
---|---
表项|表项
centered 居中|right-aligned 居右

Column 1	Column 2
centered 文本居中	right-aligned 文本居右

| Column 1 | centered Column 2 |
|:--------:| -------------:|
| centered 文本居中 | right-aligned 文本居右 |

插入mermaid图

官网：https://mermaidjs.github.io/
Github 项目地址：https://github.com/knsv/mermaid

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，生成对应的HTML代码，广泛集成于许多 Markdown 编辑器中。

```mermaid
图形种类(gantt/sequenceDiagram/flowchart/graph)
	图形的内容语句
\(转义)```

甘特图 gantt

源代码未显示结尾的三个`字符

 ```mermaid
    gantt
        dateFormat  YYYY-MM-DD
        title  GANTT diagram 
        section 现有任务
        已完成               :done,    d1, 2019-01-06,2019-01-08
        进行中               :active,  d2, 2019-01-09, 3d
        计划中               :  d3, after d2, 5d
        计划		 :d4, 2019-02-09,2019-02-15
        section 将来的任务
        未完成				: done,s1,after d3 ,2019-02-07

语法：

构成要素	格式
日期格式	YYYY-MM-DD
标题	用title标记
任务	用section标记
动作	动作名: [状态(done/active/…)],[别名],时间段
时间段	{开始时间结束时间(}{开始时间持续时间}
时间	相对时间(after\|before 动作别名）绝对时间(2019-04-09)

关系图 graph

源码

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

语法

```mermaid
Graph 方向描述
	节点 连线 节点
	subgraph 子图标描述
		子图表语句
	end

1. 图标方向

关键字	说明
TB	Top to Bottom
BT	Bottom to Top
LR	Left to Right
RL	Right to Left

2. 节点

节点名 节点样式控制字符 节点内容
eg: name(内容)

样式控制字符	说明
[内容]	矩形框
(内容)	圆角矩形
((内容))	圆形
{内容}	菱形
>内容]	右向旗帜
[内容<	左向旗帜

3. 节点间连线

语法	说明
>	线尾箭头，需要配合图片方向使用
–	单实线
==	粗实线
-.-	虚线
`--text--`	单实线加文字
`==text==`	粗实线加文字
`-.text.-`	虚线加文字

流程图 flowchat

参考网站： http://adrai.github.io/flowchart.js/

1. 节点定义
语法

节点别名=>节点类型:节点内容

节点类型	说明
start	起始框
end	结束框
operation	过程框
condition	判断框

2. 流程连线

节点->节点
eg: 判断节点(yes)-> 节点

简单例子

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

st->op->cond
cond(yes)->e
cond(no)->op

时序图 sequenceDiagram

参考网站:http://bramp.github.io/js-sequence-diagrams/

源码

  ```mermaid
sequenceDiagram
participant zs as 张三
participant ls as 李四
participant ww as 王五

loop 每天早上
    zs->> zs:加油
end
zs ->> ls: 你好！李四, 最近怎么样?
alt 我很好
	ls-->> zs: 我很好，谢谢!
else 我不好
	ls-->> zs: 我不太好！
end
ls-->>ww: 你最近怎么样，王五？
activate ww
opt 不熟
	ww-->>ls: 还行,你怎么样?
end
ls-->> zs: 我很好，谢谢!
ls-x ww: 我很好，谢谢!
Note right of ww: 李四想了很长时间, 文字太长了<br/>不适合放在一行.
ls-->>zs:打量着王五
zs->>ww: 很好... 王五, 你怎么样?

语法

sequenceDiagram
	participant 别名 as 参与者
	参与者1 消息线 参与者2：消息体
	...

1. 消息线

类型	说明
->>	有箭头实线
`-->>`	有箭头虚线
-x	末尾为×的实线(异步)
–x	末尾为×的虚线(异步)

2. 标注
note 位置描述参与者:标注文字

位置描述	说明
right of	参与者右侧
left of	参与者左侧
over	参与者之上，可横跨多个参与者

3. 循环

loop 循环的条件
    循环体描述语句
end

4. 判断

分支判断

alt 条件 1 描述
    分支 1 描述语句
else 条件 2 描述 # else 分支可选
    分支 2 描述语句
else ...
    ...
end

无分支判断

opt 条件描述
    分支描述语句
end

公式

参考网站：https://math.stackexchange.com

用字符$包围，注明其为公式

行内公式: $公式代码$
块级公式:$$公式代码$$

使用\数学符号英文名 表示符号

简单的例子
Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过 Euler integral

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall
n\in\mathbb N$ 是通过 Euler integral

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

标注

1. 注释
语法*[需要注释的内容]:解释

Markdown将文本转换为 HTML。

*[HTML]: 超文本标记语言

2. 脚注
语法: [^脚注名]

简单例子

这是一个脚注¹

这是一个脚注[^name]
[^name]:只是脚注的内容，或显示在文章尾部

只是脚注的内容，或显示在文章尾部 ↩︎

Alo_ha

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSDN Markdown使用教程

文章主要描述了markdown的各种元素（如：标题、文本样式、引用块、分割线、列表、链接、表格、mermaid图(包括：甘特图、关系图、流程图、时序图）、公式、标注)及其语法
复制链接

扫一扫

专栏目录