vupress markdown拓展语法

Bitle 2020/5/23 markdownvuepress

# 原生的 Markdown 语法

当然，你可以在 Markdown 中使用所有 Markdown 的原生语法，如果有一些不太方便使用 Markdown 语法实现的，你也可以在其中书写 HTML 语法

#VuePress 默认的扩展语法

VuePress 内置了一些比较易用的语法特性，这使得你可以更加容易地书写文章，这里简单列举下支持的语法，具体特性请前往 VuePress Markdown 扩展语法 (opens new window)查看

# 使用 markdown-it 插件扩展语法

你还可以使用 markdown-it 插件对语法进行扩展

// .vuepress/config.js
module.exports = {
  markdown: {
    // markdown-it-anchor 的选项
    anchor: { permalink: false },
    // markdown-it-toc 的选项
    toc: { includeLevel: [1, 2] },
    extendMarkdown: md => {
      // 使用更多的 markdown-it 插件!
      md.use(require('markdown-it-xxx'))
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 在 Markdown 中使用 Vue

你甚至可以在 Markdown 中直接使用 Vue 以及 Vue 组件，就像这个主题内置的徽章Badge，更多示例请见 VuePress 官网在 Markdown 中使用 Vue (opens new window)

#使用插件扩展语法还有一些 VuePress 插件可以提升你的 Markdown 语法，你可以参考插件的使用 (opens new window)来添加你自己想要的插件

下面简单介绍两个比较实用的插件

# 容器

vuepress-plugin-container (opens new window)允许你可以使用来自定义一个容器，主题利用该插件内置了三个简单易用的块容器，你可以通过以下方式来启用

输入

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

::: theorem 牛顿第一定律
假若施加于某物体的外力为零，则该物体的运动速度不变。

::: right
来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 流程图

vuepress-plugin-flowchart (opens new window)可以让你在 Markdown 中直接绘制流程图，就像这样

@flowstart
cond=>condition: Process?
process=>operation: Process
e=>end: End

cond(yes)->process->e
cond(no)->e
@flowend

1
2
3
4
5
6
7
8
9

两千个秘密

Choose mode