VuePress 简要的 Markdown 扩展
zKing 2018-10-10 工具
# 目录
[[toc]]
# 链接
# 内部链接
- [主页](/)
- [快速上手](/setting/)
- [主题设置](/setting/theme-config.md)
如果你想要链接到另一个 markdown 文件:
1.确保链接以 .html 或 .md 结尾;
2.确保路径大小写正确,因为路径的匹配是大小写敏感的
# 外部链接
[外部链接](https://vuepress.vuejs.org/zh/guide/markdown.html#%E9%93%BE%E6%8E%A5)
外部的链接将会被自动地设置为 target="_blank" rel="noopener noreferrer":
# 自定义容器
# 默认示例
::: tip
This is a tip
:::
::: warning
This is a warning
:::
::: danger
This is a dangerous warning
:::
This is a tip
This is a warning
This is a dangerous warning
# 自定义块中的标题
::: tip 提示
你正在阅读的是我个人提炼的关于 VuePress 的 markdown 扩展
:::
提示
你正在阅读的是我个人提炼的关于 VuePress 的 markdown 扩展
# 代码块中的行高亮
``` js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
# 启用行号
VuePress 中行号默认是 false,需要在 config.js
中通过配置来为每个代码块显示行号:
module.exports = {
markdown: {
lineNumbers: true
}
}
# 进阶配置
VuePress 使用 markdown-it 来渲染 Markdown,上述大多数的拓展也都是通过自定义的插件实现的。想要进一步的话,你可以通过 .vuepress/config.js 的 markdown 选项,来对当前的 markdown-it 实例做一些自定义的配置: