markdown笔记

发表于 | 更新于: | 分类于
字数统计: 3.4k 字 | 阅读时长 ≈ 13 分钟

Markdown简介

Markdown是一种轻量级的标记语言，其用简单的标记语法便可达到排版的目的，其可以使我们更加专注于内容的编写，而不需过多关注排版。本文主要整理了 Markdown 中的常用的标记语法，以便自己与他人以后查用。

Hexo 是基于 GitHub 的博客平台，Github 中的文本格式是 .md，那么用 Hexo 写博客也必然要用到 Markdown。本文首先带你选择适合你的 Markdown 编辑器(推荐 Atom )，然后对 Markdown 语法做一简要介绍。

Markdown编辑器
支持 Markdown 的编辑器有好多，功能也不完全一致，有的是用来进行基本的写作，有的是用来写代码的，有的甚至只是博客平台配套的编辑器。想了解好用的 Markdown 编辑器，可以点开链接。根据我个人的需求，我使用 Atom 作为本地 Markdown 编辑。要安利一波 Atom！

Atom
github出的编辑器，功能十分强大，除了编写代码之外还可以做为markdown编辑器，并且原生支持markdown预览，按ctrl+shift+m弹出。

标题

标题的语法是：# 标题 前面的#号个数表示标题的级别，markdown总支持1~6六级标题，通过在一行之前加上不同数量的井号来表示。如下所示，括号内容表示在markdown中输入的内容。

一级标题(# 一级标题)

二级标题(## 二级标题)

三级标题(### 三级标题)

四级标题(#### 四级标题)

五级标题(##### 五级标题)
六级标题(###### 六级标题)

段落

非常自然，一行文字就是一个段落。
例如

这是一个段落

需要另起一段，请在两个段落之间隔一个空行。

这是一个段落

这是另一个段落

不隔一个空行的换行行为，在一些编辑器中被解释为换行，即插入一个<br />标签。对与另外一些编辑器，会被解释为插入一个空格。对于后者，若要插入换行标签，请在当前一行的结尾打两个空格

粗体和斜体

Markdown 使用 * 和 _ 来表示粗体和斜体

1
2
3
4
*这是斜体*
_这也是斜体_
**这是粗体**
***这是粗体+斜体***

效果
这是斜体
这也是斜体
这是粗体
这是粗体+斜体

删除线

一部分编辑器支持删除线，它不是经典markdown中的要素。用俩个波浪线~定义删除线。
~~这是删除线~~
效果
这是删除线

引用

通过在行首加上大于号>来添加引用格式。

1
2
3
4
5
6
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

效果

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 > ：

1
2
3
4
5
> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

效果

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等：

1
2
3
4
5
6
7
8
> ## 这是一个标题。
>
> 1.   这是第一行列表项。
> 2.   这是第二行列表项。
>
> 给出一些例子代码：
>
>     return shell_exec("echo $input | $markdown_script");

效果

这是一个标题。

  1. 这是第一行列表项。
  2. 这是第二行列表项。

给出一些例子代码：

return shell_exec("echo $input | $markdown_script");

列表

Markdown 支持有序列表和无序列表。

无序列表使用星号、加号或是减号作为列表标记：

1
2
3
*   Red
*   Green
*   Blue

等同于

1
2
3
+   Red
+   Green
+   Blue

和

1
2
3
-   Red
-   Green
-   Blue

效果

  • Red
  • Green
  • Blue

有序列表则使用数字接着一个英文句点+空格：

1
2
3
1.  Bird
1.  McHale
1.  Parish

  1. Bird
  2. McHale
  3. Parish

很重要的一点是，数字并不会影响输出的 HTML 结果
你在列表标记上使用的数字并不会影响输出的 HTML 结果，上面的列表所产生的 HTML 标记为：

1
2
3
4
5
<ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish</li>
</ol>

Markdown中写注释

html标签

既然Markdown内嵌html语法，那么就可以用可以用隐藏的html标签。

注意：需要在前面空一行

1
2
3
4
<div style='display: none'>
哈哈我是注释，不会在浏览器中显示。
我也是注释。
</div>

html注释

既然支持html语法，那也支持html注释。

1
2
3
4
5
6
7
<!--哈哈我是注释，不会在浏览器中显示。-->

<!--
哈哈我是多段
注释，
不会在浏览器中显示。
-->

hack方法

hack方法就是利用markdown的解析原理来实现注释的。

一般有的markdown解析器不支持上面的注释方法，这个时候就可以用hack方法。

hack方法比上面2种方法稳定得多，但是语义化太差。

1
2
3
4
5
[comment]: <> (哈哈我是注释，不会在浏览器中显示。)
[comment]: <> (哈哈我是注释，不会在浏览器中显示。)
[comment]: <> (哈哈我是注释，不会在浏览器中显示。)
[//]: <> (哈哈我是注释，不会在浏览器中显示。)
[//]: # (哈哈我是注释，不会在浏览器中显示。)

其中，这种方法最稳定，适用性最强：

[//]: # (哈哈我是注释，不会在浏览器中显示。)
这种方法最可爱，超级无敌萌啊：

[^_^]: # (哈哈我是注释，不会在浏览器中显示。)

Markdown 代码区块

行内代码

用反引号 ` 来标记内联代码，它们会解释成<code>标签。用两个反引号包裹即可
代码中的&、<、>符号都会自动转义，请放心使用。
` 这是行内代码`
效果
这是行内代码

代码区域

Markdown 会用 <pre> 和 <code> 标签来把代码区块包起来。
Markdown 中建立代码区块很简单
第一种缩进 4 个空格或是 1 个制表符就可以

1
2
3
这是一个普通段落：

    这是一个代码区块。

Markdown 会转换成：

1
2
3
4
<p>这是一个普通段落：</p>

<pre><code>这是一个代码区块。
</code></pre>

还有一种是github的风格，代码段的前后用三个反引号独占一行来标记

```
这是一个代码区块
```
效果

1
这是个代码区块

代码语法高亮

如果你只想高亮语句中的某个函数名或关键字，可以使用 `function_name()` 实现

通常编辑器根据代码片段适配合适的高亮方法，但你也可以用 ``` 包裹一段代码，并指定一种语言
例如
```javascript
$(document).ready(function () {
alert(‘hello world’);
});
```
效果

1
2
3
$(document).ready(function () {
    alert('hello world');
});

分隔线

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

1
2
3
4
5
6
7
8
9
* * *

***

*****

- - -

---------------------------------------

效果

链接

Markdown 支持两种形式的链接语法： 行内式和参考式两种形式。
不管是哪一种，链接文字都是用 [方括号] 来标记。
格式为

  • 方括号（前面可以选择性地加上至多三个空格来缩进），里面输入链接文字

  • 接着一个冒号

  • 接着一个以上的空格或制表符

  • 接着链接的网址

  • 选择性地接着 title 内容，可以用单引号、双引号或是括弧包着

行内式（PS：一般都是这种）
要建立一个行内式的链接，只要在方块括号后面紧接着圆括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，例如：

1
这是[百度](https://www.baidu.com/ "链接的标题")的链接

效果

这是百度的链接（PS：鼠标放在链接文字上会显示标题）

参考式(PS：链接重复较多才会用)

1
2
3
这是[百度][id]的链接
然后在任意空白位置定义：
[id]: https://www.baidu.com/ "链接的标题"

链接辨别标签可以有字母、数字、空白和标点符号，但是并不区分大小写，因此下面两个链接是一样的：

1
2
[link text][a]
[link text][A]

注意：链接标题可加可不加

图片链接

格式

  • 一个惊叹号 !
  • 接着一个方括号，里面放上图片的替代文字
  • 接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上 选择性的 ‘title’ 文字。

Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 <img> 标签

插图最基础的格式就是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
![Alt text](图片链接 "optional title")

Alt text ：图片的Alt标签，用来描述图片的关键词，可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文本，后来又被用于SEO，可以方便搜索引擎根据Alt text里面的关键词搜索到图片。

图片链接：可以是图片的本地地址或者是网址。

"optional title"：鼠标悬置于图片上会出现的标题文本，可以不写。

1. 插入本地图片
只需要在基础语法的括号中填入图片的位置路径即可，支持绝对路径和相对路径。

例如：
![avatar](/user/desktop/doge.png)

缺点是不灵活不好分享，本地图片的路径更改或丢失都会造成markdown文档调不出图。

2.插入网络图片
只需要在基础语法的括号中填入图片的网络链接即可，现在已经有很多免费/收费图床和方便传图的小工具可选。

例如：
![avatar](baidu.com/pic/doge.png)

缺点是图片存在网络服务器上，非常依赖网络。

3.把图片存入markdown文档
用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置。

基础用法：

![avatar](data:image/png;base64,iVBORw0......)

这个时候会发现插入的这一长串字符串会把整个文章分割开，非常影响编写文章时的体验。

如果能够把大段的base64字符串放在文章末尾，然后在文章中通过一个id来调用，文章就不会被分割的这么乱了。就像写论文时的文末的注释和参考文档一样。

这个想法可以通过markdown的参考式链接语法来实现。

进阶用法如下：
文中引用语法：

![avatar][doge]

文末存储字符串语法：

[doge]:data:image/png;base64,iVBORw0......

这个用法不常见，比较野路子。优点是很灵活，不会有链接失效的困扰。缺点是一大团base64的乱码看着不美观。

自动链接

如果链接的地址和名字重复，可以用尖括号语法将其简化。
<http://example.com/>
就相当于

[http://example.com/](http://example.com/)
切记，大多数编辑器都会自动将符合url规则的东西视为链接，并且解释成链接。很多时候作者由于疏忽等缘故，链接和后面的中文之间缺少空格，导致链接不正常。所以我建议，链接要么加上尖括号，要么两端加上空格。

转义

markdown支持在以下字符前面插入反斜杠\ 进行转义

1
2
3
4
5
6
7
8
9
10
11
12
\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号

插入之后，将不再解析这些字符，而是原样输出。

表格

单元格和表头

使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行

1
2
3
4
name | age
---- | ---
baidu | 12
google |  32

name age
baidu 12
google 32

为了美观，可以使用空格对齐不同行的单元格，并在左右两侧都使用 | 来标记单元格边界：

1
2
3
4
|    name    | age |
| ---------- | --- |
| baidu |  12 |
| google       |  32 |

name age
baidu 12
google 32

为了使 Markdown 更清晰，| 和 - 两侧需要至少有一个空格（最左侧和最右侧的 | 外就不需要了）。

对齐

在表头下方的分隔线标记中加入 :，即可标记下方单元格内容的对齐方式：

  • :--- 代表左对齐
  • :--: 代表居中对齐
  • ---: 代表右对齐
1
2
3
4
| left | center | right |
| :--- | :----: | ----: |
| aaaa | bbbbbb | ccccc |
| a    | b      | c     |
left center right
aaaa bbbbbb ccccc
a b c

如果不使用对齐标记，单元格中的内容默认左对齐；表头单元格中的内容会一直居中对齐（不同的实现可能会有不同表现）。

插入其他内容

表格中可以插入其他 Markdown 中的行内标记：

1
2
3
4
|     name     | age |             blog                     |
| ------------ | --- | -------------------------------------|
| _baidu_      |  12 | [baidu](https://www.baidu.com/)      |
| __google__   |  32 | [google](https://www.google.com.hk/) |

name age blog
baidu 12 baidu
google 32 google

合并单元格

https://blog.csdn.net/wiborgite/article/details/78044656

参考

https://www.w3cschool.cn/markdownyfsm/markdownyfsm-odm6256r.html
https://wizardforcel.gitbooks.io/markdown-simple-world/2.html
http://xianbai.me/learn-md/article/about/readme.html

补充

markdown段落中如何产生缩进？

半方大的空白&ensp;或&#8194;
全方大的空白&emsp;或&#8195;
不断行的空白格&nbsp;或&#160;

0%