本文主要是介绍附录1、vuepress中的Markdown语法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
# 一、标题
# 说明：
#后面跟的内容就是标题，一个#就是一级标题，有几个#就是几级标题，例如2级标题就有两个##，markdown的2级和3级标题会默认自动作为子目录，
注意：#后面必须有个空格，然后再跟内容，否则#就是普通字符
# 示例：
# 这是一级标题
## 这是二级标题，二级标题底下有横线
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题WARNING
编译成html后，一级标题会默认为当前页面的head的title，也可以用front-matter指定标题。
# 二、字体
# 说明：
- 加粗：要加粗的文字左右分别用两个*号包起来
- 斜体：要倾斜的文字左右分别用一个*号包起来
- 斜体加粗：要倾斜和加粗的文字左右分别用三个*号包起来
- 删除线：要加删除线的文字左右分别用两个~~号包起来
# 示例：
**这是加粗的文字**<br/>
*这是倾斜的文字*`<br/>
***这是斜体加粗的文字***<br/>
~~这是加删除线的文字~~<br/># 效果：
这是加粗的文字
这是倾斜的文字
这是斜体加粗的文字
这是加删除线的文字
# 三、引用
# 说明：
在引用的文字前加>即可。引用也可以嵌套，如加两个>>三个>>>
# 示例：
>这是1级引用的内容>>这是2级引用的内容>>>这是3级引用的内容# 效果：
这是1级引用的内容
这是2级引用的内容
这是3级引用的内容
# 四、分割线
# 说明：
三个或者三个以上的 - 或者 * 都可以。
# 示例：
开始分割线
***
使用3个或者多个“*”的分割线---
使用3个或者多个“-”的分割线警告：
注：在三个或者多个“-”的上面加文字的话会自动变成2级标题，所以要么空一行要么就使用“*”
# 效果：
开始分割线
使用3个或者多个“*”的分割线
使用3个或者多个“-”的分割线
# 五、图片
# 说明：
格式：“![图片alt] (图片地址 “图片title”)”，含义分别如下：
图片alt：就是显示在图片下面的文字，相当于对图片内容的解释。
图片地址:可以是本地路径的图片，也可以是网络上的图片
图片title：是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加
警告：
中括号与小括号之间是没有空格的，参考示例
# 示例：
本地图片
网络图片
WARNING
上面的写法，vuepress里面完全是没有问题的，简书也没有问题，但有些博客网站这样写会失效，比如CSDN（时好时坏，之前发布的文章有时候图片能看有时候不行），
想要在CSDN里面也使用图片，那么用<img src="https://cn.vuejs.org/images/logo.png" />这种方式就可以了。这种方式vuepress也可以用，但是直接使用标签简书不行。
# 六、超链接
# 说明：
格式：[超链接名] (超链接地址 “超链接title”)
注：title可加可不加
警告：
中括号与小括号之间是没有空格的，参考示例
# 示例：
[java乐园](http://www.moyundong.com)
[简书](http://jianshu.com)
[百度](http://baidu.com)# 效果：
java乐园 (opens new window)
简书 (opens new window)
百度 (opens new window)
# 七、内部链接
# 说明：
网站内部的链接，将会被转换成 <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. 列表内容
列表嵌套
+ 一级无序列表内容11. 二级有序列表内容112. 二级有序列表内容123. 二级有序列表内容13
+ 一级无序列表内容21. 二级有序列表内容212. 二级有序列表内容223. 二级有序列表内容23# 效果：
无序列表
-
列表内容1
-
列表内容2
-
列表内容3
有序列表
- 列表内容
- 列表内容
- 列表内容
列表嵌套
- 一级无序列表内容1
- 二级有序列表内容11
- 二级有序列表内容12
- 二级有序列表内容13
- 一级无序列表内容2
- 二级有序列表内容21
- 二级有序列表内容22
- 二级有序列表内容23
# 九、表格
# 说明：
表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容-第二行分割表头和内容。- 有一个就行，为了书写对齐，多加了几个，内容会自动撑开表格宽度
-文字默认居左
-在第二行“--”两边加“：”表示文字居中
-在第二行“--”右边加“：”表示文字居右# 示例：
姓名|年龄|国家
----|:--:|--:
内容默认居左|内容居中|内容居右
张三|19|中华人民共和国
李四|29|中国
王麻子|18|中华人民共和国# 效果：
| 姓名 | 年龄 | 国家 |
|---|---|---|
| 内容默认居左 | 内容居中 | 内容居右 |
| 张三 | 19 | 中华人民共和国 |
| 李四 | 29 | 中国 |
| 王麻子 | 18 | 中华人民共和国 |
# 十、代码块儿
# 说明：
- 单行代码：代码之间分别用一个反引号（`）包起来就行，或者只要开头的反引号
- 代码块儿：
- 代码块儿是用一组三个反引号包起来，
- 指定代码块儿的类型，三个反引号后面加个空格再加类型，类型如java，html，js，md等等。（可选）
- 指定某一行高亮显示，在类型后面加个花括号，里面指定数字就可以，数字可以是一个{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># 效果：
居中：
文字居中
右对齐：
右对齐
# 十三、提示信息
# 说明：
提示信息是用一组三个冒号包起来的，第一行冒号加一个空格后面跟提示级别，再加个空格后面跟别名。
- 级别分别如下：
- tip 提示
- warning 警告
- danger 危险警告
- details 详情
# 示例：
::: tip 提示
这是一个tip，使用了别名“提示”
:::
::: warning
这是一个warning，没有使用别名
:::
::: danger
这是一个danger，没有使用别名
:::
::: details 请看详情
这是一个details，使用了别名“请看详情”
:::# 效果：
提示
这是一个tip，使用了别名“提示”
WARNING
这是一个warning，没有使用别名
DANGER
这是一个danger，没有使用别名
请看详情
这是一个details，使用了别名“请看详情”
# 十四、Emoji表情
# 说明：
所有表情都是一个符号，表情符号对应表
# 示例：
想使用表情，之间在md文件里面使用表情符号就可以了:tada: :100: :game_die:https://getemoji.com/
🥳🔥🌎 🌍 🌏 💐 🎋 🍃🌱 🌿 ☘️ 🍀🙈 🙉 🙊 🎯🎬 🎧🎮⛳️🏋️♀️🤾♂️🏂 📝📖 🎊 🎉🎀 🪄 🪅🎁 🎈📃 📄🗓 📆 📅📌 📍💯❌ ⭕️🔞# 效果：
🎉
💯
🎲
# 十五、显示代码块行号
官网说明 (opens new window)
# 说明：
在config.js做如下配置就可以了
module.exports = {markdown: {lineNumbers: true}
}# 十六、显示目录
# 说明：
一般在最顶部使用，显示这一篇文章的目录。
# 示例：
[[toc]]
直接在文档里面写一个[[top]]就可以生成目录# 效果：
- Markdown详解
- 常用语法
- 一、标题
- 二、字体
- 三、引用
- 四、分割线
- 五、图片
- 六、超链接
- 七、内部链接
- 八、列表
- 九、表格
- 十、代码块儿
- 十二、文字位置
- 十三、提示信息
- 十四、Emoji表情
- 十五、显示代码块行号
- 十六、显示目录
本文转自 [https://blog.csdn.net/loveshanqian/article/details/106337966?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522170173762816800227486253%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request\_id=170173762816800227486253&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2~all~first\_rank\_ecpm\_v1~rank\_v31\_ecpm-1-106337966-null-null.142^v96^pc\_search\_result\_base2&utm\_term=vuepress%20markdown%E7%BC%96%E5%86%99vue&spm=1018.2226.3001.4187](https://blog.csdn.net/loveshanqian/article/details/106337966?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170173762816800227486253%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=170173762816800227486253&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-106337966-null-null.142^v96^pc_search_result_base2&utm_term=vuepress%20markdown%E7%BC%96%E5%86%99vue&spm=1018.2226.3001.4187)，如有侵权，请联系删除。这篇关于附录1、vuepress中的Markdown语法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
