Skip to main content

Markdown基础

· 16 min read
Zeffon Wu

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。

基础语法

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。

1.段落与换行

  1. 段落的前后必须是空行 空行指的是行内什么都没有,或者只有空白符(空格或制表符,相邻两行文本,如果中间没有空行会显示在一行中(换行符被转换为空格)
  2. 如果需要在段落内加入换行(<br>) 可以在前一行的末尾加入至少两个空格,然后换行写其它的文字
  3. Markdown 中的多数区块都需要在两个空行之间。

2.标题

  1. Setext 形式
# H1

## H2

=- 的数量是没有限制的。通常的做法是使其和标题文本的长度相同,这样看起来比较舒服。或者可以像我一样,用四个 -=。 Setext 形式只支持 h1h2 两种标题。

  1. atx 形式 ① 可以用对称的 # 包括文本:
####H4####

#####H5#####

② 也可以只在左边使用 #

####H4

#####H5

③ 成对的 # 左侧和只在左边使用的 # 左侧都不可以有任何空白,但其内侧可以使用空白。

###左侧使用了空格###

#### 内侧使用了空格

在这一点上,可能各种 Markdown 的实现会有不同的结果,不过仍然需要我们遵守语法规则。

3.引用

  1. 引用内容 在段落或其他内容前使用 > 符号,就可以将这段内容标记为 '引用' 的内容(<blockquote>):
> 引用内容

引用内容

  1. 多行引用
> 多行引用
> 可以在每行前加 `>`

多行引用 可以在每行前加 >

> 如果仅在第一行使用 `>`
> 后面相邻的行即使省略 `>`,也会变成引用内容

如果仅在第一行使用 >, 后面相邻的行即使省略 >,也会变成引用内容

> 如果引用内容需要换行,  
> 可以在行尾添加两个空格
>
> 或者在引用内容中加一个空行

如果引用内容需要换行, 可以在行尾添加两个空格 或者在引用内容中加一个空行

  1. 嵌套引用
> 也可以在引用中
>
> > 使用嵌套的引用

也可以在引用中

使用嵌套的引用

  1. 其他 Markdown
> 在引用中可以使用使用其他任何 _Markdown_ 语法

在引用中可以使用使用其他任何 Markdown 语法

4.列表

  1. 无序列表
- 可以使用 `*` 作为标记

* 也可以使用 `+`

- 或者 `-`
  • 可以使用 * 作为标记

  • 也可以使用 +

  • 或者 -

  1. 有序列表
1. 有序列表以数字和 `.` 开始;
2. 数字的序列并不会影响生成的列表序列;
3. 但仍然推荐按照自然顺序(1.2.3...)编写。
  1. 有序列表以数字和 . 开始;

  2. 数字的序列并不会影响生成的列表序列;

  3. 但仍然推荐按照自然顺序(1.2.3...)编写。

  4. 嵌套的列表

1. 第一层

- 1-1
- 1-2

2. 无序列表和有序列表可以随意相互嵌套
1. 2-1
1. 2-2
  1. 第一层
  • 1-1
  • 1-2
  1. 无序列表和有序列表可以随意相互嵌套

  2. 2-1

  3. 2-2

  4. 语法和用法

  5. 无序列表项的开始是:符号 空格;

  6. 有序列表项的开始是:数字 . 空格;

  7. 空格至少为一个,多个空格将被解析为一个;

  8. 如果仅需要在行前显示数字和 .

5\. 可以使用:数字\. 来取消显示为列表
  1. 可以使用:数字. 来取消显示为列表

\* 的语法专门用来显示 Markdown 语法中使用的特殊字符,参考字符转义

5.代码

  1. 代码块 - 可以使用缩进来插入代码块:
<html> // Tab开头
<title>Markdown</title>
</html> // 四个空格开头

代码块前后需要有至少一个空行,且每行代码前需要有至少一个 Tab 或四个空格;
  1. 行内代码 也可以通过 `,插入行内代码(Tab 键上边、数字 1 键左侧的那个按键): 例如 <title>Markdown</title>

  2. 转换规则 代码块中的文本(包括 Markdown 语法)都会显示为原始内容,而特殊字符会被转换为 HTML 字符实体

6.分隔线

  1. 可以在一行中使用三个或更多的 *-_ 来添加分隔线(<hr>):
---
---

---



  1. 多个字符之间可以有空格(空白符),但不能有其他字符:
---
---


7.超链接

  1. 行内式

格式为 [link text](URL 'title text')

① 普通链接:

[Google](http://www.google.com/)

Google

② 指向本地文件的链接:

[icon.png](./images/icon.png)

[icon.png]

③ 包含 'title' 的链接:

[Google](http://www.google.com/ "Google")

Google

title 使用 '" 都是可以的。

  1. 参考式

参考式链接的写法相当于行内式拆分成两部分,并通过一个 识别符 来连接两部分。参考式能尽量保持文章结构的简单,也方便统一管理 URL。

① 首先,定义链接:

[Google][link]

Google

第二个方括号内为链接独有的 识别符,可以是字母、数字、空白或标点符号。识别符是 不区分大小写 的;

② 然后定义链接内容:

[link]: http://www.google.com/ "Google"

其格式为:[识别符]: URL 'title'

其中,URL 可以使用 <> 包括起来,title 可以使用 ""、''、() 包括(考虑到兼容性,建议使用引号),title 部分也可以换行来写;

链接内容的定义可以放在同一个文件的 任意位置

③ 也可以省略 识别符,使用链接文本作为 识别符

[Google][]
[Google]: http://www.google.com/ "Google"

[Google][] [Google]: http://www.google.com/ "Google"

参考式相对于行内式有一个明显的优点,就是可以在多个不同的位置引用同一个 URL。

  1. 自动链接

使用 <> 包括的 URL 或邮箱地址会被自动转换为超链接:

<http://www.google.com/>

<123@email.com>

http://www.google.com/

123@email.com

该方式适合行内较短的链接,会使用 URL 作为链接文字。邮箱地址会自动编码,以逃避抓取机器人。

8.图片

插入图片的语法和插入超链接的语法基本一致,只是在最前面多一个 !。也分为行内式和参考式两种。

  1. 行内式
![GitHub](https://avatars3.githubusercontent.com/u/33784785?s=100&v=3 "GitHub,Social Coding")

方括号中的部分是图片的替代文本,括号中的 'title' 部分和链接一样,是可选的。

  1. 参考式
![GitHub][github]

[github]: https://avatars3.githubusercontent.com/u/33784785?s=100&v=3 "GitHub,Social Coding"

  1. 指定图片的显示大小

Markdown 不支持指定图片的显示大小,不过可以通过直接插入<img />标签来指定相关属性:

<img
src="https://avatars3.githubusercontent.com/u/33784785?s=100&v=3"
alt="GitHub"
title="GitHub,Social Coding"
width="50"
height="50"
/>

9.强调

  1. 使用 * *_ _ 包括的文本会被转换为 <em></em> ,通常表现为斜体:
这是用来 _演示__文本_

这是用来 演示文本

  1. 使用 ** **__ __ 包括的文本会被转换为 <strong></strong>,通常表现为加粗:
这是用来 **演示****文本**

这是用来 演示文本

  1. 用来包括文本的 *_ 内侧不能有空白,否则 *_ 将不会被转换(不同的实现会有不同的表现):
这是用来 _ 演示__文本 _

这是用来 演示文本

  1. 如果需要在文本中显示成对的 *_,可以在符号前加入 \ 即可:
这是用来 \*演示\* 的 \_文本\_

这是用来 演示文本

  1. ***___ 都必须 成对使用

10.字符转义

Markdown 标准 本身所包含的功能有限,所以产生了许多第三方的扩展语法,如 GitHub Flavored Markdown。 这里只介绍众多扩展语法中的一部分内容,它们在不同平台或工具的支持程度不同,请参考具体平台或工具的文档和说明来使用。

  1. 删除线
  2. 代码块和语法高亮
  3. 表格
  4. Task List
  • CommonMark CommonMark 试图将碎片化的 Markdown 实现和扩展进行标准化,提供统一的 规范 及不同语言的 实现

扩展语法

1.删除线

这就是 ~~删除线~~

这就是 删除线

2.代码块和语法高亮

  1. 代码块 与原来使用缩进来添加代码块的语法不同,这里使用 来包含多行代码:
<p>code here</p>

三个 ``` 要独占一行。

  1. 代码高亮

在上面的代码块语法基础上,在第一组 ``之后添加代码的语言,如 'javascript' 或 'js',即可将代码标记为JavaScript`:

window.addEventListener("load", function () {
console.log("window loaded");
});

3.表格

  1. 单元格和表头

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

| name     | age |
| -------- | --- |
| Zhangsan | 13 |
| Lisi | 14 |
nameage
Zhangsan13
Lisi14

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

| name     | age |
| -------- | --- |
| zhangsan | 13 |
| Listsi | 14 |
nameage
zhangsan13
Listsi14

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

  1. 对齐

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

  • :--- 代表左对齐
  • :--: 代表居中对齐
  • ---: 代表右对齐
| left | center | right |
| :--- | :----: | ----: |
| aaaa | bbbbbb | ccccc |
| a | b | c |
leftcenterright
aaaabbbbbbccccc
abc

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

  1. 插入其他内容

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

| project    | blog                                                   |
| ---------- | ------------------------------------------------------ |
| _ZeffonWu_ | [ZeffonWu](https://github.com/ZeffonWu) |
| **Blog** | [Blog](https://github.com/ZeffonWu/ZeffonWu.github.io) |
projectblog
ZeffonWuZeffonWu
BlogBlog

4.Task List

- [ ] Eat
- [x] Code
- [x] HTML
- [x] CSS
- [x] JavaScript
- [ ] Sleep
  • Eat
  • Code
  • HTML
  • CSS
  • JavaScript
  • Sleep

格式转换

1.HTML

  1. MdCharm

选择 'File', 'Export to...',勾选 'HTML', 点击 'Browser...' 选择导出目录并输入导出的文件名,点击 'OK',即可将当前的 Markdown 文档转换为 HTML 文档。

如果不满意 HTML 文档的样式,可以在设置中自定义 CSS。

  1. Pandoc

参考 Installing 安装 Pandoc。

打开命令行,进入文档所在目录:

cd /path/to/file/

执行下面的命令,将 Markdown 转换为 HTML:

pandoc -o hello.html hello.md

默认的转换,只是将 Markdown 内容转换为 HTML 标签,所以只能看到浏览器的默认样式。

可以执行下面的命令,为导出的 HTML 添加自定义样式:

pandoc -o hello.html -c style.css hello.md

style.css 仍然是以 <link> 的方式关联到 HTML 文档中的,所以在发布的时候需要将 CSS 一同发布出去。

2.PDF

  1. MdCharm

与导出 HTML 文档类似,选择 'File', 'Export to...',勾选 'PDF', 点击 'Browser...' 选择导出目录并输入导出的文件名,点击 'OK',即可将当前的 Markdown 文档转换为 PDF 文档。

如果不满意 PDF 文档的样式,可以在设置中自定义 CSS。

  1. Pandoc

使用 Pandoc 导出 PDF 文档,需要先安装某个 LaTeX 引擎(参考 Creating a PDF)。然后执行命令:

pandoc -o hello.pdf hello.md

当然,也可以通过 -c style.css 来指定样式文件。

  1. Chrome

在将 Markdown 转换为 HTML 文档 之后,可以通过 Chrome 浏览器 打开它。选择 '打印'(Ctrl+P),然后更改 '目标打印机' 为 '另存为 PDF',再进行一些设置后,即可保存为 PDF 文档。

3.Word

  1. 复制粘贴 在导出为 HTML 文档之后,可以(在浏览器中)手动复制 HTML 页面的内容,然后粘贴到 Word 文档中,保存即可。

  2. Pandoc 执行下面的命令,即可将 Markdown 文档转换为 Word 文档:

pandoc -o hello.docx hello.md

参考文献

Github-LearnShare-Learning-Markdown