MarkDown 学习笔记

MarkDown 学习笔记

Markdown 是一种轻量级标记语言，创始人为约翰・格鲁伯。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者 HTML）文档。 这种语言吸收了很多在 电子邮件中已有的纯文本标记的特性。由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。

Markdown 编辑器

Markdown 有许多优秀的编辑器，下面简单介绍几款，大家用自己常用的就好:

• Typora: 美观、简洁、高效
• Atom: GitHub 开发
• Visual Studio Code: 免费开源，各种强大，也是我一直在用的，用来写什么都行
• Sublime Text 3: 收费，拓展齐全

当然，你也可以在 dillinger、editor.md等在线 Markdown 编辑器里进行写作练习。

MarkDown 标题

MarkDown 标题的表示非常简单，使用 # 号即可，1-6 级标题可以分别用 1-6 个 # 表示，如下所示：

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

效果如下所示：

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

{% note info %}

注意: 当 # 和标题文本之间没有空格时，各 Markdown 应用程序的处理方式是不一样的。为了兼容考虑，请在 # 和标题文本之间添加一个空格。同样，后面提到的绝大多数方法也是如此。

✅ # 这是一级标题

❌ #这是一级标题

{% endnote %}

MarkDown 段落

• 段落的前后必须是空行

• 空行指的是行内什么都没有，或者只有空白符

• 相邻两行文本，如果中间没有空行 会显示在一行中

若想在段内强制换行，需要使用两个以上空格加上回车

当然也可以使用 HTML 的 <br> 标签来进行换行

{% note info %}

如果想在 MarkDown 中插入空格，可以使用如下 HTML 标签：

         插入一个空格
         插入两个空格
         插入四个空格
       插入细空格

{% endnote %}

文本样式

在强调内容两侧分别加上 * 或者 _即可实现加粗或倾斜

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
~~删除文本~~

效果如下所示：

斜体文本 斜体文本 粗体文本 粗体文本 粗斜体文本 粗斜体文本 删除文本

分割线

可以在一行中使用三个或更多的 *、- 或 _ 来添加分隔线（<hr>）：

***
------
___

效果如下所示：

---

---

---

MarkDown 列表

无序列表

使用 *、+、或 - 标记无序列表

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

效果如下所示：

• 可以使用 * 作为标记

• 也可以使用 +

• 或者 -

{% note info %}

注意： *、+、- 和文字之间有 空格

{% endnote %}

有序列表

使用 数字 + . 标记有序列表

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

效果如下所示：

1. 有序列表以数字和 . 开始；

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

3. 但仍然推荐按照自然顺序（1.2.3…）编写。

{% note info %}

注意： 数字 + . 和文字之间有 空格

{% endnote %}

嵌套的列表

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

效果如下所示：

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

MarkDown 引用

在段落或其他内容前使用 > 符号，就可以将这段内容标记为 ’ 引用 ’ 的内容

> 这里是引用内容

> 区块引用
>> 嵌套引用

效果如下所示：

这里是引用内容

区块引用

嵌套引用

MarkDown 代码

行内代码

用两个 ` 把中间的代码包裹起来，就可以优雅地引用代码框

`Welcome come to EmoryHuang's Blog!`

效果如下所示：

Welcome come to EmoryHuang's Blog!

代码块

代码块使用 4 个空格或者一个制表符（Tab 键），当然也可以通过 ```将代码包裹起来

    public class Welcome {
      public static void main(String[] args) {
        System.out.println("Welcome come to EmoryHuang's Blog!");
      }
    }


```js
var sys = require("sys");
sys.puts("Welcome come to EmoryHuang's Blog!");
```

效果如下所示：

public class Welcome {
  public static void main(String[] args) {
    System.out.println("Welcome come to EmoryHuang's Blog!");
  }
}

var sys = require("sys");
sys.puts("Welcome come to EmoryHuang's Blog!");

{% note info %}

在第一组 ```之后添加代码的语言，如'javascript'或'js'，即可将代码标记为 JavaScript，实现代码高亮

{% endnote %}

MarkDown 链接

MarkDown 链接有如下两种使用方式：

[链接名称](链接地址)

或者

<链接地址>

示例如下：

这是普通链接 [EmoryHuang's Blog](https://emoryhuang.cn/)

这是包含title的链接 [EmoryHuang's Blog](https://emoryhuang.cn/ "EmoryHuang's Blog")

这是自动链接 <https://emoryhuang.cn/>

效果如下所示：

EmoryHuang’s Blog

EmoryHuang’s Blog

https://emoryhuang.cn/

MarkDown 图片

插入图片的语法和插入超链接的语法基本一致，只是在最前面多一个 !

![EmoryHuang](https://cdn.jsdelivr.net/gh/emoryhuang/imgbed@master/447670037.png)

效果如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vCp8xPA6-1632143889421)(https://cdn.jsdelivr.net/gh/emoryhuang/imgbed@master/447670037.png)]

指定图片的显示大小

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

<img
  src="https://cdn.jsdelivr.net/gh/emoryhuang/imgbed@master/447670037.png"
  alt="EmoryHuang"
  title="EmoryHuang"
  width="50"
  height="50"
/>

效果如下所示：

MarkDown 表格

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

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

效果如下所示：

表头	表头
单元格	单元格
单元格	单元格

对齐

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

• :--- 代表左对齐
• :--: 代表居中对齐
• ---: 代表右对齐

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

效果如下所示：

左对齐	右对齐	居中对齐
单元格	单元格	单元格
单元格	单元格	单元格

MarkDown 转义字符

Markdown 使用反斜杠（\）转义特殊字符：

**文本加粗**
\*\* 正常显示星号 \*\*

效果如下所示：

文本加粗

** 正常显示星号 **

MarkDown 使用 HTML 标签

在 Markdown 中插入一些简单的 HTML 代码或 CSS 片段来获得更多扩展，可以使得文章内容更具有多样性。

文字颜色

<p style="color: #00b7ff;">这段文字的颜色为 #00b7ff</p>

效果如下所示：

这段文字的颜色为 #00b7ff

文字大小

<p style="font-size:0.7em;">这段文字的大小为 0.7em</p>

效果如下所示：

这段文字的大小为 0.7em

文字位置

<p style="text-align:center">这段文字居中</p>

效果如下所示：

这段文字居中

details 标签

<details>
<summary>点我一下</summary>
<p>Welcome come to EmoryHuang's Blog!</p>
</details>

效果如下所示：

点我一下

Welcome come to EmoryHuang's Blog!

参考

• Markdown 教程
• Learning-Markdown