00. 目录


文章目录


  • 00. 目录
  • 01. 文本格式化
  • 1.1 粗体和斜体
  • 1.2 删除线
  • 1.3 标题
  • 1.4 引用
  • 1.5 嵌套引用
  • 02. 代码格式化
  • 2.1 行内代码
  • 2.2 区块代码
  • 03. 列表
  • 3.1 无序列表
  • 3.2 有序列表
  • 3.3 列表嵌套
  • 3.4 多段列表
  • 04. 链接
  • 4.1 行内式链接
  • 4.2 参考式链接(不支持)
  • 4.3 页内导航
  • 05. 图片
  • 06. 分割线
  • 07. 转义
  • 08. 附录


01. 文本格式化

1.1 粗体和斜体

我们使用​​*斜体文字*​​​的方式倾斜文字,​​**加粗的文字**​​​的方式加粗文字,使用​​***加粗的斜体字***​​同时加粗和倾斜文字。

Markdown代码

*斜体文字*
**加粗文字**
***加粗的斜体文字***

编译成html

<em>斜体文字</em>
<strong>加粗文字</strong>
<strong><em>加粗的斜体文字</em></strong>

网页显示效果

斜体文字

加粗文字

加粗的斜体文字

1.2 删除线

markdown中可以给文字添加删除线

Markdown代码

~~添加删除线的文字~~

编译成html

<del>添加删除线的文字</del>

网页显示效果

添加删除线的文字

1.3 标题

Markdown 支持两种标题的语法,类 Setext 和类 atx 形式。

Markdown代码

类Setext形式采用底线的形式.
一号标题
=============
二号标题
-------------
类Atx形式则是在行首插入1到6个#,对应到标题1到标题6.
# 一号标题
## 二号标题
### 三号标题
#### 四号标题
##### 五号标题
###### 六号标题

编译成html

<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>

网页显示效果

1.4 引用

Markdown通过在引用的文字之前添加”>”标记达到引用的效果,引用段落的时候可以偷懒只在整个段落的第一行最前面加上 >。引用里面可以使用强调、链接等其他语法。

Markdown代码

> 这里是一段引用
> 也可以偷懒只在首行引用一个段落

> 引用段落:Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出
来,实现**易读易写**的文章写作,已经逐渐成为事实上的行业标准。

>**结束引用,用个空行**

编译成html

<blockquote>
<p>这里是一段引用
也可以偷懒只在首行引用一个段落</p>
<p>引用段落:Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出来,实现<strong>易读易写</strong>的文章写作,已经逐渐成为事实上的行业标准。</p>
<strong>结束引用,用个空行</strong>
</blockquote>

网页显示效果


这里是一段引用
也可以偷懒只在首行引用一个段落

引用段落:Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出
来,实现​易读易写​的文章写作,已经逐渐成为事实上的行业标准。

结束引用,用个空行


1.5 嵌套引用

引用可以嵌套,使用不同数量的“>”表示层次。

Markdown代码

> 这里是个引用
> > 嵌套引用
>
> 这里是个引用

编译成html

<blockquote>
<p>这里是个引用</p>
<blockquote>
<p>嵌套引用</p>
</blockquote>
<p>这里是个引用</p>
</blockquote>

网页显示效果


这里是个引用


嵌套引用


这里是个引用


02. 代码格式化

2.1 行内代码

使用反引号”`”包含实现行内代码。

Markdown代码

我们可以使用`<br>`换行,也可以使用`<p></p>`实现。
`高亮`文字

编译成html

我们可以使用<code><br></code>换行,也可以使用<code><p></p></code>实现。
<code>高亮</code>文字。

网页显示效果

我们可以使用​​<br>​​换行,也可以使用​​<p></p>​​实现。

​高亮​​文字

2.2 区块代码

如果需要在代码内插入反引号,需要多个反引号开始和结束一段代码。

如果需要代码块和语法高亮,可以采用三个反引号的方式,同时可以注明语言类型。

Markdown代码

```c
#include <stdio.h>

int main(void)
{
return 0;
}
```

编译成html

网页显示效果

#include <stdio.h>

int main(void)
{
return 0;
}

03. 列表

3.1 无序列表

无序列表使用星号、加号或是减号作为列表标记,如果不按列表显示,前面记得加一空行。

Markdown代码

- Red
- Green
- Blue

编译成html

<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

网页显示效果


  • Red
  • Green
  • Blue

3.2 有序列表

使用数字接着一个英文句点表示一个有序列表, 注意前面的数字对列表没有影响。

Markdown代码

1. 北京
2. 上海
3. 广州
4. 深圳

编译成html

<ol>
<li>文字</li>
<li>图片</li>
<li>表格</li>
</ol>

网页显示效果


  1. 北京
  2. 上海
  3. 广州
  4. 深圳

3.3 列表嵌套

列表可以嵌套,添加tab缩进表示层次。

Markdown代码

1. 文字
1. 强调
- 粗体
- 斜体
- 粗体和斜体
2. 引用
2. 图片
3. 表格

编译成html

<ol>
<li>文字
<ol>
<li>强调
<ul>
<li>粗体</li>
<li>斜体</li>
<li>粗体和斜体</li>
</ul>
</li>
<li>引用</li>
</ol>
</li>
<li>图片</li>
<li>表格</li>
</ol>

网页显示效果


  1. 文字

  1. 强调

  • 粗体
  • 斜体
  • 粗体和斜体

  1. 引用

  1. 图片
  2. 表格

3.4 多段列表

列表项里可以包含多个段落,每个项目下的段落都必须缩进 4 个空格或是 1 个制表符。

Markdown代码

1. 学习Markdown
学习Markdown的网站,我们可以参考文章结尾的学习资源,文档、案例、教程。
学习起来很简单。
2. 使用Markdown
可以使用客户端和在线编辑器。

编译成html

网页显示效果


  1. 学习Markdown
    学习Markdown的网站,我们可以参考文章结尾的学习资源,文档、案例、教程。
    学习起来很简单。
  2. 使用Markdown
    可以使用客户端和在线编辑器。

04. 链接

4.1 行内式链接

首先来看行内式,只要在方块括号后面紧接着圆括号并插入网址链接即可,如果你还想要加上链接的 title 文字,只要在网址后面,用双引号把 title 文字包起来即可。

Markdown代码

欢迎大家访问我的[博客](javascript:void(0) "博客")。
也可以不指定[链接](javascript:void(0))的title。

编译成html

欢迎大家访问我的<a href="javascript:void(0)" title="博客">博客</a>。
也可以不指定<a href="javascript:void(0)">链接</a>的title。

网页显示效果

欢迎大家访问我的博客。

也可以不指定链接的title。

4.2 参考式链接(不支持)

参考式链接需要进行链接内容定义,然后引用该定义设置链接。

链接内容定义格式为:

[链接名]: 链接地址 "链接title"
[链接名]: 空格(或tab) 链接地址 空格 "链接地址"(可省略)12

设置链接的格式为

[链接文字][链接名称]

Markdown代码

请大家访问我的[博客][blog],获取更多信息。
javascript:void(0) "我的CSDN博客"

编译成html

请大家访问我的<a href="javascript:void(0)" title="我的CSDN博客">博客</a>,获取更多信息。

网页显示效果

请大家访问我的[博客][blog],获取更多信息。

4.3 页内导航

我们同样可以使用markdown实现页内导航,步骤如下:


  1. 先定义一个锚记
    ​<div id="footer"></div>​
  2. 然后设置页内链接
    ​[到底部](#footer)​​ 我们可以类似的方式去实现文章的页内导航。单击下面的链接跳转到2.4链接。

05. 图片

Markdown 使用一种和链接很相似的语法来标记图片,同样也允许两种样式: 行内式和参考式。

行内式图片如下所示:

![Alt text](/path/to/img.jpg)
![Alt text](/path/to/img.jpg "Optional title")

参考式图片如下所示:

![Alt text][id]
[id]: url/to/image "Optional title attribute"

到目前为止, Markdown 还没有办法指定图片的宽高,如果你需要的话,你可以使用普通标签。

注意:图片如果大于显示区域,则图片宽度自适应,如果图片较小则以原始尺寸显示。

06. 分割线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:

Markdown代码

* * *
***
___
- - -

编译成html

网页显示效果




07. 转义

Markdown 可以利用反斜杠来实现转义, 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:

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

08. 附录