Markdown的基本语法

Markdown的基本语法

参考来源:Markdown 教程手把手教会你使用MarkdownCmd Markdown

01、标题

1.1、# 号使用

使用 # 号可以表示 1-6 级标题,一级标题对应一个 # 号,随着 # 的个数递增,一级标题字号最大,六级标题字号最小。

代码如下:

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

1.2、= - 使用

也可以使用 = 和 - 标记一级和二级标题

代码:

一级标题
=======

二级标题
-------

注意:

  • 最后一个 # 字符与标题中间留一个空格

  • 标题应该置于行首,如果放入表格中可能无法正确解析


02、字体

2.1、斜体、粗体、粗斜体

星号和下划线都可以,单是斜体,双是粗体,三是粗斜体。

代码 效果
*斜体* 斜体
_斜体_ 斜体
**粗体** 粗体
__粗体__ 粗体
***粗斜体*** 粗斜体
___粗斜体___ 粗斜体

快捷键:

- 加粗 Ctrl + B
- 斜体 Ctrl + I

03、换行

3.1、三种换行方式

Markdown 换行的方式有很多种:

  • 直接在一句话后敲两个空格
  • 两句话之间加一个空行
  • 如果在编辑的时候,想让一行文字显示的时候换行,就在中间加 <br/>

04、区块引用

4.1、区块引用 >

Markdown 中区块引用通过符号 > 来实现。> 符号后的空格,可有可无。

在引用的区块内,允许换行存在,换行并不会终止引用的区块。如果要结束引用,需要一行空白行,来结束引用的区块。

代码:

>引用

效果:

引用

4.2、区块引用嵌套

此外,引用还可以嵌套使用:

代码:

>引用
>>引用的引用
>>>引用的引用的引用

效果:

引用

引用的引用

引用的引用的引用


05、链接

5.1、外链接

Markdown中插入链接的使用方式是:
代码:

[链接名称](链接地址)
<链接地址>
即是:
[我的博客](https://blog.xxxxxxx/xxxxxxxxxx)
或者
<https://blog.xxxxxxx/xxxxxxxxxx>

效果:

我的博客

5.2、高级链接

可以通过变量来设置一个链接,变量赋值在文档末尾进行。

代码:

这个链接用 3 作为网址变量 [Google][3]
这个链接用 abc 作为网址变量 [ABC][abc]
然后在文档的结尾为变量赋值(网址)

  [1]: http://www.google.com/
  [abc]: http://www.abc.com/

效果:

这个链接 3 作为网址变量 Google

这个链接用 abc 作为网址变量 ABC


06、图片

6.1、图片语法格式

Markdown 中插入图片的使用方式是:

代码:

![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")

![图片的替代文字,可写可不写,但是中括号要有](图片地址,本地链接或者URL地址。)
![图片的替代文字,可写可不写,但是中括号要有](图片地址,本地链接或者URL地址。"选择性的title文字")

6.2、图片网址变量

可以像网址那样对图片网址使用变量:

代码:

这个链接用 4 作为网址变量 [ABCD][4].
然后在文档的结尾为变量赋值(网址)

[4]: https://abcd.com/images/abcd.png

效果:

这个链接用 4 作为网址变量 ABCD

然后在文档的结尾为变量赋值(网址)

6.3、改变图片参数

也可以修改位置和图片大小:

代码:

![图片描述,可写可不写,但是中括号要有](图片地址,本地链接或者URL地址#pic_center空格 =长x宽)

或

<img src="https://abcd.com/images/abcd.png" width="60%">

注意:

- 等号前有空格,是 x 不是 \*
- 可使用 Ctrl + v 粘贴图片

07、列表

7.1、有序/无序列表

列表分为有序列表和无序列表

- 无序列表,使用 * 、+ 、- ,再加一个空格作为列表的标记
- 有序列表,使用数字并加上 . 号,再加一个空格作为列表的标记

代码:

* 无序列表 1
+ 无序列表 2
- 无序列表 3

1. 有序列表 1
2. 有序列表 2
3. 有序列表 3

效果:

  • 无序列表 1
  • 无序列表 2
  • 无序列表 3
  1. 有序列表 1

  2. 有序列表 2

  3. 有序列表 3

7.2、列表嵌套

如果想要控制列表的层级,则需要再列表符号前使用 Tab

代码:

+ 无序列表 1
+ 无序列表 2
	+ 无序列表 2.1
	+ 无序列表 2.2

1. 有序列表 1
	1.1 有序列表 1.1
2. 有序列表 2
	2.1 有序列表2.1

效果:

  • 无序列表 1
  • 无序列表 2
    • 无序列表 2.1
    • 无序列表 2.2
  1. 有序列表 1
    1.1 有序列表 1.1

  2. 有序列表 2
    2.1 有序列表 2.1

7.3、列表中使用区块

如果要在列表项目内放进区块,那么就需要在 > 前添加四个空格的缩进。

代码:

* 11111
    > 22222
    > 33333
* 44444

效果:

  • 11111

    22222
    33333

  • 44444

7.4、在区块中使用列表

代码:

> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

效果:

区块中使用列表

  1. 第一项
  2. 第二项
  • 第一项
  • 第二项
  • 第三项

7.5、定义型列表

名词 1
定义 1(左侧有一个可见的冒号和四个不可见的空格)
代码块 2
这是代码块的定义(左侧有一个可见的冒号和四个不可见的空格)

​ 代码块(左侧有八个不可见的空格)


08、分割线

8.1、分割线语法

Markdown中给出了多种分割线的样式,我们可以使用分割线让文章结构更加的清晰。

分割线的使用,可以在一行中用三个以上的 - 或者 * 或者 _ 来建立一个分割线,行内不能有其他东西。可以在星号或是减号中间插入空格,但是注意:在分割线上的上面空一行。

代码:


---
***
- - -
* * *

效果:



注意:在写分割线前,要空一行之后写,否则会导致前一行字体放大。


09、删除线

9.1、删除线语法

删除线的的使用,可以在要添加删除线的文字前后添加两个波浪线 ~~

代码:

~~这是删除的文字~~

效果:

这是删除的文字


10、下划线

10.1、下划线语法

下划线的使用和 HTML 中<u>标签类似,在需要添加下划线的文字首尾添加 <u>文本</u>

代码:

<u>添加下划线</u>

效果:

添加下划线


11、代码块

Markdown中代码块有两种:

11.1、一个函数或代码片段

如果在一行内需要引用代码,即是段落上的一个函数或片段的代码,只需要用反引号 ` 引起来就好了。

代码:

`abc` def

效果:

abc def

11.2、代码区块 ```

如果是在一个块内需要引用代码,则在需要引用的代码块的前一行和后一行使用三个反引号,同时在前一个反引号后写入代码的语言。可以指定一种语言,也可以不指定。

代码:

```
#include<iostream>
using namespace std;
int main(){
	cout<<"abc def"<<endl;
	return 0;
}
```

效果:

#include<iostream>
using namespace std;
int main(){
	cout<<"abc def"<<endl;
	return 0;
}

11.3、代码区块 Tab键

代码区块使用四个空格或者一个制表符(Tab 键)

11.4、加强的代码块

支持四十一种编程语言的语法高亮的显示,行号显示。

非代码示例:

$ pip install xxxxx

C++ 示例:

#include<iostream>
using namespace std;
int main(){
	cout<<"abc def"<<endl;
	return 0;
}

11.5、支持语言

支持以下语言:

bash
c,clojure,cpp,cs,css
dart,dockerfile, diff
erlang
go,gradle,groovy
haskell
java,javascript,json,julia
kotlin
lisp,lua
makefile,markdown,matlab
objectivec
perl,php,python
r,ruby,rust
scala,shell,sql,swift
tex,typescript
verilog,vhdl
xml
yaml

12、表格

12.1、表格及对齐方式

表格使用 | 来分割不同的单元格,使用 - 来分割表头和其他行。

  • :- 将表头及单元格内容左对齐
  • -: 将表头及单元格内容右对齐
  • :-: 将表头及单元格内容居中

代码:

| 学号  | 班级   |  姓名  |
| ---  | -----:| :----: |
| 01   | 1     |  张三   |
| 02   |  2    |  李四   |
| 02   |  2    |  王五   |

效果:

学号 班级 姓名
01 1 张三
02 2 李四
02 2 王五

13、脚注

13.1、脚注语法

脚注是对文本的备注,我们时长在论文中看到脚注,在Markdown中的使用方法

代码:

使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2], 你可以使用 Typora[^T] 编辑器进行书写。
[^1]:Markdown是一种纯文本标记语言
[^2]:HyperText Markup Language 超文本标记语言
[^T]:NEW WAY TO READ & WRITE MARKDOWN.

使用 Markdown[1]可以效率的书写文档, 直接转换成 HTML[2].

注意:脚注自动被搬运到最后面,请到文章末尾查看,并且脚注后方的链接可以直接跳转回到加注的地方。


14、特殊符号

14.1、转义

对于Markdown中的语法符号,前面家反斜线 \ 即可显示符号本身。

代码:

\\
\*
\_
\+
\.
等等

效果:

\

*

_

+

.

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:

\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

15、支持 HTML 标签

15.1、HTML 标签

不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。

目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等 。

代码:

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

效果:

使用 Ctrl+Alt+Del 重启电脑

15.2、内嵌图标

更多的图标可以参看 font-awesome 官方网站。

代码:

<i class="icon-weibo"></i>
<i class="icon-baidu"></i>

15.3、HTML 表格实例

代码:

<table>
    <tr>
        <th rowspan="2">值班人员</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
    </tr>
    <tr>
        <td>李强</td>
        <td>张明</td>
        <td>王平</td>
    </tr>
</table>

效果:

值班人员 星期一 星期二 星期三
李强 张明 王平

16、公式

16.1、公式语法

Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。

KaTeX 拥有比 MathJax 更快的性能,但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。

默认下的分隔符:

    $...$ 或者 \(...\) 中的数学表达式将会在行内显示。
    $$...$$ 或者 \[...\] 或者 ```math 中的数学表达式将会在块内显示。

访问 MathJax 参考更多使用方法。

代码:

$$
\begin{Bmatrix}
   a & b \\
   c & d
\end{Bmatrix}
$$

\[\begin{Bmatrix} a & b \\ c & d \end{Bmatrix} \]


17、标签分类

17.1、标签语法

在编辑区任意行的列首位置输入以下代码给文稿标签:

标签: 数学 英语 Markdown

或者

Tags: 数学 英语 Markdown

标签: 数学 英语 Markdown

Tags: 数学 英语 Markdown


18、流程图

语法参考:流程图语法参考

18.1、横向流程图

横向流程图源码格式:

```mermaid
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
```

效果:

graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] F[横向流程图]

18.2、竖向流程图

竖向流程图源码格式:

```mermaid
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]
```

效果:

graph TD A[方形] --> B(圆角) B --> C{条件a} C --> |a=1| D[结果1] C --> |a=2| E[结果2] F[竖向流程图]

18.3、标准流程图 (竖向)

标准流程图源码格式:

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```

18.4、标准流程图 (横向)

标准流程图源码格式(横向):

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

19、UML 时序图 / 序列图

语法参考:序列图语法参考

19.1、UML 时序图

UML 时序图源码样例:

```sequence
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗?
```

19.2、UML 时序图 (复杂)

UML 时序图源码复杂样例:

代码:

```sequence
Title: 标题:复杂使用
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
```

19.3、UML 标准时序图

UML 标准时序图样例:

代码:

```mermaid
%% 时序图例子,-> 直线,-->虚线,->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗?
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!
```

效果:

%% 时序图例子,-> 直线,-->虚线,->>实线箭头 sequenceDiagram participant 张三 participant 李四 张三->王五: 王五你好吗? loop 健康检查 王五->王五: 与疾病战斗 end Note right of 王五: 合理 食物 <br/>看医生... 李四-->>张三: 很好! 王五->李四: 你怎么样? 李四-->王五: 很好!

20、甘特图

语法参考:甘特图语法参考

20.1、甘特图

甘特图内在思想简单。基本是一条线条图,横轴表示时间,纵轴表示活动(项目),线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行,及实际进展与计划要求的对比。

甘特图样例:

代码:

```mermaid
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
```

效果:

%% 语法示例 gantt dateFormat YYYY-MM-DD title 软件开发甘特图 section 设计 需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI设计 : des3, after des2, 5d 未来任务 : des4, after des3, 5d section 开发 学习准备理解需求 :crit, done, 2014-01-06,24h 设计框架 :crit, done, after des2, 2d 开发 :crit, active, 3d 未来任务 :crit, 5d 耍 :2d section 测试 功能测试 :active, a1, after des3, 3d 压力测试 :after a1 , 20h 测试报告 : 48h

21、Mermaid 流程图 & 序列图

语法参考:Mermaid 流程图语法参考

21.1、Mermaid 流程图

代码:

```graphLR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

语法参考:Mermaid 序列图语法参考

21.2、Mermaid 序列图

代码:

```sequence
    Alice->John: Hello John, how are you?
    loop every minute
        John-->Alice: Great!
    end
```

22、待办事宜 Todo 列表

22.1、待办事宜列表

使用带有 [ ] 或 [x] (未完成或已完成)项的列表语法撰写一个待办事宜列表,并且支持子列表嵌套以及混用Markdown语法,例如:

    - [ ] **Cmd Markdown 开发**
        - [ ] 改进 Cmd 渲染算法,使用局部渲染技术提高渲染效率
        - [ ] 支持以 PDF 格式导出文稿
        - [x] 新增Todo列表功能 [语法参考](https://github.com/blog/1375-task-lists-in-gfm-issues-pulls-comments)
        - [x] 改进 LaTex 功能
            - [x] 修复 LaTex 公式渲染问题
            - [x] 新增 LaTex 公式编号功能 [语法参考](http://docs.mathjax.org/en/latest/tex.html#tex-eq-numbers)
    - [ ] **七月旅行准备**
        - [ ] 准备邮轮上需要携带的物品
        - [ ] 浏览日本免税店的物品
        - [x] 购买蓝宝石公主号七月一日的船票

对应显示如下待办事宜 Todo 列表:


23、总结

这篇博客仅仅作为本人学习过程笔记,便于遗忘后快速回看。所参考的具体文档已经在博客开头列出。


  1. Markdown是一种纯文本标记语言 ↩︎

  2. HyperText Markup Language 超文本标记语言 ↩︎

posted @ 2024-04-16 22:31  干点儿正事儿吧  阅读(5)  评论(0编辑  收藏  举报
返回顶端