Vuepress markdown扩展语法

Front Matter

VuePress 提供了对 YAML front matter (opens new window) 开箱即用的支持

---
title: Blogging Like a Hacker
lang: en-US
---

这些数据可以在当前 markdown 的正文，或者是任意的自定义或主题组件中使用。

GitHub 风格的表格

输入

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

输出

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Emoji

输入

:tada: :100:

输出 🎉 💯

所有支持的 emoji (opens new window)

目录

输入

[[toc]]

输出

• Front Matter
• GitHub 风格的表格
• Emoji
• 目录
• 自定义容器
• 代码块中的语法高亮

自定义容器

输入

::: tip
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

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

输出

这是一个提示

这是一个警告

这是一个危险警告

See More

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

你也可以自定义块中的标题：

::: danger STOP
危险区域，禁止通行
:::

::: details 点击查看代码
	```js
	console.log('你好，VuePress！')
	```
:::

STOP

危险区域，禁止通行

点击查看代码

	console.log('你好，VuePress！')

代码块中的语法高亮

输入

<!-- 单行高亮 -->
	``` js {4}
	export default {
		data () {
			return {
				msg: 'Highlighted!'
			}
		}
	}
	```

<!-- 多行高亮 -->
	``` js{1,4,6-7}
	export default { // Highlighted
		data () {
			return {
				msg: `Highlighted!
				This line isn't highlighted,
				but this and the next 2 are.`,
				motd: 'VuePress is awesome',
				lorem: 'ipsum',
			}
		}
	}
	```

输出

export default {
	data () {
		return {
			msg: 'Highlighted!'
		}
	}
}

export default { // Highlighted
	data () {
		return {
			msg: `Highlighted!
			This line isn't highlighted,
			but this and the next 2 are.`,
			motd: 'VuePress is awesome',
			lorem: 'ipsum',
		}
	}
}

除了单行以外，你也可指定多行，行数区间，或是两者都指定:

• 行数区间: 例如 {5-8}, {3-10}, {10-17}
• 多个单行: 例如 {4,7,9}
• 行数区间与多个单行: 例如 {4,7-13,16,23-27,40}