安装

Markdown拓展

Emoji

:tada: :100:

输出 🎉 💯

你可以在这个列表或是本站列表找到所有可用的 Emoji。

自定义容器

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

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

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

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

提示

这是一个提示

注意

这是一个警告

警告

这是一个危险警告

详情

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

自定义块中的标题：

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

::: details 查看代码
console.log('Hello vuepress!')
:::

结果显示

STOP

危险区域，禁止通行

查看代码

console.log('Hello vuepress!')

代码块中的语法高亮

VuePress 使用了 Prism (opens new window)来为 markdown 中的代码块实现语法高亮。Prism 支持大量的编程语言，你需要做的只是在代码块的开始倒勾中附加一个有效的语言别名：
输入

\```js
export default {
  name: 'MyComponent',
  // ...
}
\```

代码块中的行高亮

输入

\``` js {4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
\```

输出

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

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

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

行号

通过配置 .vuepress/config.js 来显示行号

module.exports = {
  markdown: {
    lineNumbers: true
  }
}

导入代码段

通过下述的语法导入已经存在的文件中的代码段：

<<< @/filepath

它也支持行高亮：

<<< @/filepath{highlightLines}

输入

<<< @/docs/.vuepress/public/js/test.js{5}

输出

<<< @/docs/.vuepress/public/js/test.js{5}

输入

<<< @/docs/.vuepress/public/js/test.js#getlist{2-3}

输出

<<< @/docs/.vuepress/public/js/test.js#getlist{2-3}

markdown中使用vue组件

所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件输入

<list-title/>

输出

重要提示

请确保一个自定义组件的名字包含连接符或者是 PascalCase，否则，它将会被视为一个内联元素，并被包裹在一个标签中，这将会导致 HTML 渲染紊乱，因为 HTML 标准规定，标签中不允许放置任何块级元素。

插值

输入

{{1+1}}

输出
2

指令

输入

<span v-for="i in 3">{{i}}<span>

输出
123

访问网站以及页面的数据

编译后的组件没有私有数据，但可以访问网站的元数据，举例来说：

输入

{{$page}}

输出

{ 
  "title": "安装", 
  "frontmatter": {}, 
  "regularPath": "/vuepress/", 
  "relativePath": "vuepress/README.md", 
  "key": "v-5a5cc684", 
  "path": "/vuepress/", 
  "headers": [ 
      { "level": 2, "title": "Emoji", "slug": "emoji" }, 
      { "level": 2, "title": "目录", "slug": "目录" }, 
      { "level": 2, "title": "自定义容器", "slug": "自定义容器" }, 
      { "level": 2, "title": "代码块中的语法高亮", "slug": "代码块中的语法高亮" }, 
      { "level": 2, "title": "代码块中的行高亮", "slug": "代码块中的行高亮" }, 
      { "level": 2, "title": "行号", "slug": "行号" }, 
      { "level": 2, "title": "导入代码段", "slug": "导入代码段" }, 
      { "level": 2, "title": "markdown中使用vue组件", "slug": "markdown中使用vue组件" }, 
      { "level": 2, "title": "插值", "slug": "插值" } 
    ] 
  }

使用组件

输入

.
└─ .vuepress
   └─ components
      ├─ demo-1.vue
      ├─ OtherComponent.vue
      └─ Foo
         └─ Bar.vue

输出

<demo-1/>
<OtherComponent/>
<Foo-Bar/>