Markdown基本语法大全_含各类图表_含例子说明_markdown表格语法_Bulut0907的博客-CSDN博客

目录

1. 目录的使用

当在Markdown文本中输入@[toc](目录名称)时,编辑器会自动将各级标题生成目录

例子

@[toc](目录)
# 一级标题
## 二级标题

显示效果
目录效果图

2. 标题

共支持6级标题

例子

# 一级标题
## 二级标题
### 三级标题

显示效果
标题效果图

3. 强调

3.1 加粗

例子:

**加粗的字**

显示效果:

加粗的字

3.2 键盘文本

例子:

复制文本的命令为:<kbd>ctrl</kbd> + <kbd>c</kbd>

显示效果:

复制文本的命令为:ctrl + c

3.3 斜体
例子:

*斜体*

显示效果:
斜体

3.4 行内代码

例子:

输出hello world:`print("hello world")`

显示效果:

输出hello world:print("hello world")

3.5 标记文本
例子:

==我是标记==

显示效果:

我是标记

3.6 删除文本
例子:

~~删除文本~~

显示效果:
删除文本

3.7 引用文本
例子:

> 引用1
> 引用2

显示效果:

引用1
引用2

3.8 上下标
例子:

H~2~O
2^10^

显示效果:
H2O
210

4. 列表

4.1 有序列表

例子:

 1. 项目1
    2. 项目1.1
         3. 项目1.1.1

显示效果:

  1. 项目1

    1. 项目1.1

      1. 项目1.1.1

4.2 无序列表
例子:

- 项目
    - 项目
        - 项目

显示效果:

  • 项目

    • 项目

      • 项目

4.3 检查列表
例子:

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

显示效果:

  • 计划任务
  • 完成任务

4.4 自定义列表
第一行必须是空行,两个类别之间也需空行

例子:


C++
: 虚构函数

Java
: 虚拟机

显示效果:

C++

虚构函数

Java

虚拟机

5. 注脚

在需要添加注脚的词后面添加[^注脚名称], 在文中任意位置(一般在该段落的最后)添加注脚内容[^注脚名称]: 我是注脚的具体内容,在HTML页面显示的时候,注脚内容显示在文章末尾处

例子:

在我后面添加注脚[^1]
...
...
...
[^1]: 我是注脚的具体内容

显示效果:
注脚效果图

6. 链接和图片

6.1 链接
例子:

[CSDN官方网站](https://www.csdn.net/)

显示效果:
CSDN官方网站

6.2 引用类型链接
该格式的URL在Markdown中更易于显示和阅读,引用类型链接的第二部分一般放在Markdown文件的末尾处

例子:

[CSDN官方网站][CSDN]

[CSDN]: https://www.csdn.net/

显示效果:
CSDN官方网站

6.3 图片
CSDN可以进行本地图片的拖拽上传,图片默认是居中显示,可以通过参数控制图片的大小

例子:

![美女图片](https://img-blog.csdnimg.cn/img_convert/9ae30424fa42b891bcea5e31d715199f.png#pic_center =500x600)

显示效果:
美女图片

7. 代码片段

默认是文本格式,也可以是java、scala、python等编程语言的代码风格

例子:
代码片段例子

显示效果:

#include <iostream>
using namespace std;

int main() {
    cout << "hello world" << endl;
    
    return 0;
}

8. 表格

8.1 创建表格
例子:

字段1 | 字段2 | 字段3
------  | ------ | ------
row1 | value1 | value2
row2 | value3 | value4
row3 | value5 | value6

显示效果:

字段1

字段2

字段3

row1

value1

value2

row2

value3

value4

row3

value5

value6

8.2 设置表格居左、居中、居右
例子:

字段1 | 字段2 | 字段3
:------  | :------: | ------:
居左 | 居中 | 居右
居左 | 居中 | 居右
居左 | 居中 | 居右

显示效果:

字段1

字段2

字段3

居左

居中

居右

居左

居中

居右

居左

居中

居右

8.3 SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体,和行内代码类似

例子:

类型 | ASCII | HTML
------ | ------ | ------
单引号 | `'单引号'` | '单引号'
 双引号 | `"双引号"` | "双引号"
 破折号 | `--two ---three` | --two ---three

显示效果

类型

ASCII

HTML

单引号

'单引号'

‘单引号’

双引号

"双引号"

“双引号”

破折号

--two ---three

–two —three

9. 注释

例子:

对后面的编程语言进行注释:C++
*[C++]: 面向对象编程语言

显示效果:
注释效果图片

10. KaTeX数学公式

以后再写一篇针对KaTeX数学公式的文章,更多内容参考这里

例子:

Gamma公式展示$\Gamma(n)=(n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分
$$
\Gamma(z)=\int_0^\infty t^{z-1}e^{-t}dt\,.
$$

显示效果:

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

说明:
行内公式用$...$,多行公式用$$...$$,空格用\quad, 下标用_0,上标用^1, {}用于角标,\,表示 3 / 13 3/13 3/13 em space,在特殊公式后面输入常规公式记得空格

10.1 Greek Letters希腊字母

Γ \Gamma Γ \Gamma

10.2 Logic and Set Theory逻辑与集合论

∀ \forall ∀ \forall

∈ \in ∈ \in

10.3 Font字体

A B \mathbb {AB} AB \mathbb {AB}

10.4 Operators运算符

∫ \int ∫ \int

10.5 Symbols and Punctuation符号和标点符号

∞ \infty ∞ \infty

11 甘特图

更多内容参考mermaid

例子:

gantt  
    dateFormat YYYY-MM-DD  
    title 使用mermaid语言定制甘特图  
    section 项目A  
    任务一: active, des1, 2020-11-01, 2020-11-02  
    任务二: crit, des2, after des1, 2d  
    section 项目B  
    任务三: done, des3, 2020-11-04, 3d  
    任务四: des4, 5d  

显示效果(图中红线为当前日期):

2021 April July October 2022 April 任务一 任务二 任务三 任务四 项目A 项目B 使用mermaid语言定制甘特图

11.1 关键字
gantt:表示绘制gantt图
dateFormat:指定日期格式,YYYY-MM-DD
title:图表的名称
section:项目名称

11.2 项目任务

任务状态(默认未完成):

  • done
  • active
  • crit

desc为任务描述,需要英文,中文会有问题

日期范围:

  • 开始日期, 结束日期(不包含)
  • 开始日期, 天数
  • after des, 天数
  • 天数(开始时间为当前日期)

12 UML图表

可以使用UML图表进行渲染,更多内容参考mermaid

12.1 使用Mermaid产生一个序列图

例子:

sequenceDiagram  
title: 使用mermaid语言定制序列图  
大宝 ->\> 二宝: 大宝—>>二宝  
二宝 -->\> 小宝: 二宝—>>小宝  
小宝 -x 二宝: 二宝<—小宝  
二宝 --x 大宝: 大宝<—二宝

note left of 大宝: 我是大宝  
note over 二宝: 我是二宝  
note right of 小宝: 我是小宝<br/>乖乖的小宝  

显示效果:

大宝 二宝 小宝 大宝--->>二宝 二宝--->>小宝 二宝<---小宝 大宝<---二宝 我是大宝 我是二宝 我是小宝 乖乖的小宝 大宝 二宝 小宝 使用mermaid语言定制序列图

说明:
sequenceDiagram:表示汇制序列图
title:图表的名称
箭头含义:

  • ->> 实线箭头
  • –>> 虚线箭头
  • -x 带x的实线箭头
  • –x 带x的虚线箭头

note标记含义:

  • note left of xxx:位于xxx对象的左侧
  • note over xxx:覆盖在xxx对象上
  • note right of xxx:位于xxx对象的右侧

12.2 使用Mermaid产生一个流程图

例子:

graph LR  
A\[长方形\] --小样, 接招–> B{菱形}  
B --> C((圆形))  
C ==别欺负我兄弟==> A  

显示效果:

小样, 接招

别欺负我兄弟

长方形

菱形

圆形

说明:
graph:表示绘制流程图
图的方向:

  • TB从上到下
  • BT从下到上
  • RL从右到左
  • LR从左到右
  • TD同TB

定义一个图形实例的方式为id[图形实例描述],id可以在后面直接使用,其中不同图形的类型如下:

  • []表示圆形
  • ()表示圆角矩形
  • ]表示不对称的矩形
  • {}表示菱形
  • (())表示圆形

节点之间的连接:

  • A --> B A带箭头指向B
  • A --- B A不带箭头指向B
  • A -.- B A用虚线指向B
  • A -.-> B A用带箭头的虚线指向B
  • A ==> B A用加粗的箭头指向B
  • A --描述-- B A不带箭头指向B并在中间加上文字描述
  • A --描述--> B A带箭头指向B并在中间加上文字描述
  • A -.描述.-> B A用带箭头的虚线指向B并在中间加上文字描述
  • A ==描述==> B A用加粗的箭头指向B并在中间加上文字描述

13. FLowchart流程图

更多内容参考flowchart

例子:

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 开始 输入账号和密码登录 登录成功? 登录成功 yes no

说明:
flowchat:表示绘制flowchat流程图

定义一个图形实例的方式为:id=>操作模块: 图形实例说明,id可以在后面进行引用,其中=>两边不能有空格,常用的操作模块如下:

  • start 开始
  • end 结束
  • operation 普通操作块
  • condition 条件判断块
  • subroutine 子任务块
  • inputoutput 输入输出块

转向控制方式为:id1->id2->id3,其中->两边不能有空格

condition有两种结果:

  • cond(yes)->e 表示符合条件转向e
  • cond(no)->op 表示不符合条件转向op

原网址: 访问
创建于: 2023-03-30 12:35:58
目录: default
标签: 无

请先后发表评论
  • 最新评论
  • 总共0条评论