附录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可加可不加

警告:

中括号与小括号之间是没有空格的,参考示例

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

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. 列表内容
列表嵌套
+ 一级无序列表内容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

# 九、表格

# 说明:
表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

-第二行分割表头和内容。- 有一个就行,为了书写对齐,多加了几个,内容会自动撑开表格宽度
-文字默认居左
-在第二行"--"两边加":"表示文字居中
-在第二行"--"右边加":"表示文字居右
# 示例:
姓名|年龄|国家
----|:--:|--:
内容默认居左|内容居中|内容居右
张三|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,使用了别名"提示"

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]]就可以生成目录
# 效果:
相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#