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

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

牛魔王sq

5015人浏览 · 2020-05-25 17:24:26

牛魔王sq · 2020-05-25 17:24:26 发布

Markdown详解

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

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

常用语法

[[toc]]

一、标题

说明：

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

示例：

# 这是一级标题
## 这是二级标题，二级标题底下有横线
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

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

二、字体

说明：

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

示例：

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

效果：

这是加粗的文字

这是倾斜的文字`

这是斜体加粗的文字

~~这是加删除线的文字~~

三、引用

说明：

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

示例：

>这是1级引用的内容

>>这是2级引用的内容

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

效果：

这是1级引用的内容

这是2级引用的内容

这是3级引用的内容

四、分割线

说明：

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

示例：

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

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

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

效果：

开始分割线

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

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

五、图片

说明：

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

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

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

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

示例：

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

效果：

本地图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DyTAQ7nn-1590650980205)(http://47.94.137.150/moyundong/image/frontend/vuepress/huoying.jpeg “火影忍者”)]

网络图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-93JXtcDP-1590650980210)(https://cn.vuejs.org/moyundong/images/logo.png “vue官网logo”)]

::: warning
上面的写法，vuepress里面完全是没有问题的，简书也没有问题，但有些博客网站这样写会失效，比如CSDN（时好时坏，之前发布的文章有时候图片能看有时候不行），
想要在CSDN里面也使用图片，那么用<img src="https://cn.vuejs.org/images/logo.png" />这种方式就可以了。这种方式vuepress也可以用，但是直接使用标签简书不行。
:::

六、超链接

说明：

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

示例：

[java乐园](http://www.moyundong.com)
[简书](http://jianshu.com)
[百度](http://baidu.com)

效果：

java乐园

 简书

 百度

七、内部链接

说明：

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

示例：

以如下的文件结构为例：
.
├─ README.md
├─ foo
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ README.md
   ├─ three.md
   └─ four.md

效果：

假设你现在在 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
有序列表
1. 列表内容
2. 列表内容
3. 列表内容
列表嵌套
+ 一级无序列表内容1
   1. 二级有序列表内容11
   2. 二级有序列表内容12
   3. 二级有序列表内容13
+ 一级无序列表内容2
   1. 二级有序列表内容21
   2. 二级有序列表内容22
   3. 二级有序列表内容23

效果：

无序列表

列表内容1

列表内容2

列表内容3

有序列表

列表内容
列表内容
列表内容

列表嵌套

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

九、表格

说明：

表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

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

示例：

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

效果：

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

十、代码块儿

说明：

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

示例：

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

效果：

单行代码：
create database test;

代码块：

    function show(){
         console.log("这里是js代码");
         console.log("这一行是高亮的");
         console.log("这一行是高亮的");
         console.log("这一行是高亮的");
    }

十二、文字位置

说明：

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

示例：

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

效果：

居中：

文字居中
右对齐：

右对齐

十三、提示信息

说明：

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

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

示例：

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

效果：

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

十四、Emoji表情

说明：

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

示例：

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

效果：

🎉
💯
🎲

十五、显示代码块行号

说明：

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

module.exports = {
  markdown: {
    lineNumbers: true
  }
}

十六、显示目录

说明：

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

示例：

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

效果：

[[toc]]

后记

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

🍉🍉🍉 欢迎大家来博客了解更多内容：java乐园 🍉🍉🍉

vuepress入门详解（一）vuepress介绍
 vuepress入门详解（二）vuepress 快速搭建
 vuepress入门详解（三） vuepress 目录结构
 vuepress入门详解（四）vuepress 基本配置
 vuepress入门详解（五）vuepress Markdown详解
 vuepress入门详解（六）vuepress 实用插件
 vuepress入门详解（七）vuepress如何添加评论功能

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^