vuepress入门详解（五）vuepress Markdown详解


Markdown详解

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）和亚伦·斯沃茨（Aaron Swartz）。它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档”
::: danger
本文的markdown语法都是适用于vuepress的，其它工具没有试过，应该大部分都可以适用。
这个博客所有文章都是通过markdown写的。

看十遍不如动手做一遍，大家可以把内容复制到自己的文档里面看下效果
:::

常用语法

[[toc]]

一、标题

说明：

#后面跟的内容就是标题，一个#就是一级标题，有几个#就是几级标题，例如2级标题就有两个##，markdown的2级和3级标题会默认自动作为子目录，
注意：#后面必须有个空格，然后再跟内容，否则#就是普通字符

示例：

1
2
3
4
5
6
# 这是一级标题
## 这是二级标题，二级标题底下有横线
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

::: warning
编译成html后，一级标题会默认为当前页面的head的title，也可以用front-matter指定标题。
:::

二、字体

说明：

  • 加粗：要加粗的文字左右分别用两个*号包起来
  • 斜体：要倾斜的文字左右分别用一个*号包起来
  • 斜体加粗：要倾斜和加粗的文字左右分别用三个*号包起来
  • 删除线：要加删除线的文字左右分别用两个~~号包起来

示例：

1
2
3
4
**这是加粗的文字**<br/>
*这是倾斜的文字*`<br/>
***这是斜体加粗的文字***<br/>
~~这是加删除线的文字~~<br/>

效果：

这是加粗的文字

这是倾斜的文字`

这是斜体加粗的文字

这是加删除线的文字

三、引用

说明：

在引用的文字前加>即可。引用也可以嵌套，如加两个>>三个>>>

示例：

1
2
3
4
5
>这是1级引用的内容

>>这是2级引用的内容

>>>这是3级引用的内容

效果：

这是1级引用的内容

这是2级引用的内容

这是3级引用的内容

四、分割线

说明：

三个或者三个以上的 - 或者 * 都可以。111111顶顶顶

示例：

1
2
3
4
5
6
开始分割线
***
使用3个或者多个“*”的分割线

---
使用3个或者多个“-”的分割线

::: warning 警告：
注：在三个或者多个“-”的上面加文字的话会自动变成2级标题，所以要么空一行要么就使用“*”
:::

效果：

开始分割线

使用3个或者多个“*”的分割线

使用3个或者多个“-”的分割线

五、图片

说明：

格式：“![图片alt] (图片地址 “图片title”)”，含义分别如下：

图片alt：就是显示在图片下面的文字，相当于对图片内容的解释。

图片地址:可以是本地路径的图片，也可以是网络上的图片

图片title：是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加
::: warning 警告：
中括号与小括号之间是没有空格的，参考示例。
:::

示例：

1
2
3
4
本地图片
![图片火影忍者](./img/huoying.jpeg "火影忍者")
网络图片
![vue官网logo](https://cn.vuejs.org/images/logo.png "vue官网logo")

效果：

本地图片

网络图片

::: warning
上面的写法，vuepress里面完全是没有问题的，但有些博客网站这样写会失效，比如CSDN，想要在CSDN里面也使用图片，那么用
这种方式就可以了。这种方式vuepress也可以用。
:::

六、超链接

说明：

格式：[超链接名] (超链接地址 “超链接title”)
注：title可加可不加
::: warning 警告：
中括号与小括号之间是没有空格的，参考示例
:::

示例：

1
2
3
[摩云洞](http://www.moyundong.com)
[简书](http://jianshu.com)
[百度](http://baidu.com)

效果：

摩云洞

简书

百度
csdn
开源中国
思否

七、内部链接

说明：

网站内部的链接，将会被转换成 用于 SPA 导航。同时，站内的每一个文件夹下的README.md或者 index.md 文件都会被自动编译为index.html，对应的链接将被视为/。

示例：

1
2
3
4
5
6
7
8
9
10
11
以如下的文件结构为例：
.
├─ README.md
├─ foo
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ README.md
   ├─ three.md
   └─ four.md

效果：

1
2
3
4
5
6
7
假设你现在在 foo/one.md 中：
[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo](./two) <!-- 跳转到 two 文件 -->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾（推荐） -->
[bar - four](../bar/four.html) <!-- 也可以用 .html -->

八、列表

说明：

  • 无序列表：无序列表用 - + * 任何一种加上一个空格再加内容就可以了
  • 有序列表：数字加点空格加内容
  • 列表嵌套：第二行缩进两个空格就可以嵌套了

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
无序列表
- 列表内容1
+ 列表内容2
* 列表内容3
有序列表
1. 列表内容
2. 列表内容
3. 列表内容
列表嵌套
+ 一级无序列表内容1
   1. 二级有序列表内容11
   2. 二级有序列表内容12
   3. 二级有序列表内容13
+ 一级无序列表内容2
   1. 二级有序列表内容21
   2. 二级有序列表内容22
   3. 二级有序列表内容23

效果：

无序列表

  • 列表内容1
  • 列表内容2
  • 列表内容3

有序列表

  1. 列表内容
  2. 列表内容
  3. 列表内容

列表嵌套

  • 一级无序列表内容1
    1. 二级有序列表内容11
    2. 二级有序列表内容12
    3. 二级有序列表内容13
  • 一级无序列表内容2
    1. 二级有序列表内容21
    2. 二级有序列表内容22
    3. 二级有序列表内容23

九、表格

说明：

1
2
3
4
5
6
7
8
9
表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

-第二行分割表头和内容。- 有一个就行，为了书写对齐，多加了几个，内容会自动撑开表格宽度
-文字默认居左
-在第二行“--”两边加“：”表示文字居中
-在第二行“--”右边加“：”表示文字居右

示例：

1
2
3
4
5
6
姓名|年龄|国家
----|:--:|--:
内容默认居左|内容居中|内容居右
张三|19|中华人民共和国
李四|29|中国
王麻子|18|中华人民共和国

效果：

姓名 年龄 国家
内容默认居左 内容居中 内容居右
张三 19 中华人民共和国
李四 29 中国
王麻子 18 中华人民共和国

十、代码块儿

说明：

  • 单行代码：代码之间分别用一个反引号（`）包起来就行，或者只要开头的反引号
  • 代码块儿：
    1. 代码块儿是用一组三个反引号包起来，
    2. 指定代码块儿的类型，三个反引号后面加个空格再加类型，类型如java，html，js，md等等。（可选）
    3. 指定某一行高亮显示，在类型后面加个花括号，里面指定数字就可以，数字可以是一个{6}，也可以是一个范围{2-8}。（可选）

示例：

1
2
3
4
5
6
7
8
9
10
11
12
单行代码：
`create database test;`
代码块：
(```js {3-6})
  function show(){
           console.log("这里是js代码");
           console.log("这一行是高亮的");
           console.log("这一行是高亮的");
           console.log("这一行是高亮的");
      }
(```)
注：实际中去掉两边小括号。为了防止转译，前后三个反引号处加了小括号，实际是没有的。

效果：

单行代码：
create database test;

代码块：

1
2
3
4
5
6
    function show(){
         console.log("这里是js代码");
         console.log("这一行是高亮的");
         console.log("这一行是高亮的");
         console.log("这一行是高亮的");
    }

十二、文字位置

说明：

默认文字都是左对齐的（例如本句话），想要居中和右对齐需要手动添加

示例：

1
2
3
4
居中：
<center>文字居中</center>
右对齐：
<p align="right">右对齐</p>

效果：

居中：

文字居中

右对齐：

右对齐

十三、提示信息

说明：

提示信息是用一组三个冒号包起来的，第一行冒号加一个空格后面跟提示级别，再加个空格后面跟别名。

  • 级别分别如下：
    1. tip 提示
    2. warning 警告
    3. danger 危险警告
    4. details 详情

示例：

1
2
3
4
5
6
7
8
9
10
11
12
::: tip 提示
这是一个tip，使用了别名“提示”
:::
::: warning
这是一个warning，没有使用别名
:::
::: danger
这是一个danger，没有使用别名
:::
::: details 请看详情
这是一个details，使用了别名“请看详情”
:::

效果：

::: tip 提示
这是一个tip，使用了别名“提示”
:::
::: warning
这是一个warning，没有使用别名
:::
::: danger
这是一个danger，没有使用别名
:::
::: details 请看详情
这是一个details，使用了别名“请看详情”
:::

十四、Emoji表情

说明：

所有表情都是一个符号，表情符号对应表

示例：

1
2
3
4
想使用表情，之间在md文件里面使用表情符号就可以了
  :tada:
  :100:
  :game_die:

效果：

??
??
??

十五、显示代码块行号

说明：

在config.js做如下配置就可以了

1
2
3
4
5
module.exports = {
  markdown: {
    lineNumbers: true
  }
}

十六、显示目录

说明：

一般在最顶部使用，显示这一篇文章的目录。

示例：

1
2
[[toc]]
直接在文档里面写一个[[top]]就可以生成目录

效果：

[[toc]]

后记

这章看完，我们就能可以创建自己的博客或者文档系统，然后自由自在的写文章了。后面还会给大家介绍一些好用的插件，帮助我们更好的完成写作并且提高网站的使用效果。

::: warning
在不同的平台，文档显示的效果是不一样的，最佳最全观看地址：vuepress Markdown详解
欢迎大家来博客了解更多内容：摩云洞
:::