前言

本文章仅供查看渲染效果，不构成学习指导意见
详尽教程请参考官网 Markdown中文网
其他教程链接：菜鸟教程

在VSCode下Markdown环境配置

  • 安装扩展：Markdown Preview Enhanced
  • 右键md文档任意位置，在新出现的选项卡中选择：
    Markdown Preview Enhanced: Open Preview to the Side
  • 中文显示为：
    MPE 打开侧边栏预览

Typora下载

标题

1
2
3
4
5
6
# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题
  • 输出结果：

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题
这是六级标题

字体

1
2
3
4
**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~
  • 输出结果：
    这是加粗的文字
    这是倾斜的文字`
    这是斜体加粗的文字
    这是加删除线的文字

引用

1
2
3
>这是引用的内容
>>这是引用的内容
>>>>>>>>>>这是引用的内容
  • 输出结果：

    这是引用的内容

    这是引用的内容

    这是引用的内容

分割线

1
2
3
4
5
三个或者三个以上的 - 或者 * 都可以。
---
----
***
*****
  • 输出结果：

图片的插入（本地、网络）

插图最基础的格式

1
![Alt text](图片链接 "optional title")

Alt text：图片的Alt标签，用来描述图片的关键词，可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字，后来又被用于SEO，可以方便搜索引擎根据Alt text里面的关键词搜索到图片。 图片链接：可以是图片的本地地址或者是网址。”optional title”：鼠标悬置于图片上会出现的标题文字，可以不写。

插入本地图片

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

1
![avatar](/user/picture/1.jpg)

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

插入网络图片

1
![avatar](https://cdn.jsdelivr.net/gh/Winward-King/picture_host@master/image/1645216950299T93NaMG.png)
  • 输出结果：

尼尔

文章插图视频

1
复制 嵌入代码 到文章，可通过width、height修改播放窗口尺寸
  • 添加raw 标签防止干扰
1
2
3
{% raw %}
添加raw 标签防止干扰
{% endraw %}
  • 用CSS代码调整样式
1
2
3
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;" ></iframe>
</div>
  • 输出结果：

音频嵌入

生成外链播放器，复制 HTML代码

  • 输出结果：

超链接

行内式

1
[链接名](超链接地址  "超链接title")

title可加可不加

  • 示例：
1
2
[简书](http://jianshu.com)
[百度](http://baidu.com)

参考式

1
2
3
4
5
6
推荐几个网站[Google][1]、[github][2]以及
百度是一个不错的[网站][3]。

[1]:http://www.google.com
[2]:http://www.github.com
[3]:http://www.baidu.com
  • 输出结果：

推荐几个网站Google、github以及
百度是一个不错的网站。

自动链接

1
1. <https://baidu.com>
  • 输出结果：
  1. https://baidu.com

列表

无序列表

1
2
3
- 列表内容
+ 列表内容
* 列表内容

注意：- + * 跟内容之间都要有一个空格

  • 输出结果
  • 列表内容
  • 列表内容
  • 列表内容

有序列表

1
2
3
4
1. 有序列表1
1. 有序列表2
    1. 有序列表3
        1. 有序列表4
  • 输出结果
  1. 有序列表1
  2. 有序列表2
    1. 有序列表3
      1. 有序列表4

表格

Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。
在表格中转义管道字符
可以使用表格的HTML字符代码（&#124;）在表中显示竖线（|）字符。
(博客需要通过标签识别)

1
2
3
4
|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |
  • 输出结果
表头 表头
单元格 单元格
单元格 单元格

第一行：第一行要显示的，类似Thead
第二行：对齐方式|:—–|左对齐，|:—–:|居中，|—–:|右对齐
每列的宽度是根据对应列里最长的文本来决定

1
2
3
4
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
  • 输出结果
左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格

代码

用两个反引号包起来，注意：是ESC下面那个键

单行代码：代码之间分别用一个反引号包起来

1
`代码内容`

代码块：代码之间分别用三个反引号包起来，且两边的反引号单独占一行

   ```
   代码内容
   ```

基于HTML语法

空格

  • 手动输入空格。注意！此时的分号为英文分号，但是不推荐使用此方法，太麻烦！
  • HEXO渲染器有可能不兼容，Markdown支持大部分HTML、CSS语法
1
&nbsp;
  • 使用全角空格。即：在全角输入状态下直接使用空格键就ok了

在markdown中加入上标、下标

1
2
H<sub>2</sub>O  CO<sub>2</sub>
爆米<sup>TM</sup>
  • 输出结果

H2O CO2
小米TM