diff --git a/docs/src/996_其它/05_Markdown扩展语法.md b/docs/src/996_其它/05_Markdown扩展语法.md index 0e3285d..895913e 100644 --- a/docs/src/996_其它/05_Markdown扩展语法.md +++ b/docs/src/996_其它/05_Markdown扩展语法.md @@ -1,4 +1,4 @@ -## 在 Hexo 中 +## 在 Hexo 中 {#Hexo} ### NOTE 提示块 #### 基本语法 ```md @@ -57,7 +57,7 @@ 第一行 `{% tabs 标签, 1 %}` 设置每个子标签在不指定标题时显示为 `标签 + 数字序号` `1` 表示默认展开第 1 个选项卡,如果是 `-1` 则只显示标签标题,隐藏内容,点击可以显示内容 -## 在 Github 中 +## 在 Github 中 {#Github} 在Github上使用特殊markdown来强调警报样式内容块中的内容 ```md > [!NOTE] @@ -76,6 +76,143 @@ > 行动的负面潜在后果。 ``` +## 在 VitePress 中 {#VitePress} +### 语法高亮 +VitePress 提供由 [Shiki](https://github.com/shikijs/shiki) 提供支持的语法高亮,以及行高亮等附加功能: +**输入** +````md +```js{4} +export default { + data () { + return { + msg: 'Highlighted!' + } + } +} +``` +```` +**输出** +```js{4} +export default { + data () { + return { + msg: 'Highlighted!' + } + } +} +``` +除了单行之外,还可以指定多个单行、多行,或两者均指定: + +* 多行:例如 `{5-8}、{3-10}、{10-17}` +* 多个单行:例如 `{4,7,9}` +* 多行与单行:例如 `{4,7-13,16,23-27,40}` + +也可以使用 `// [!code highlight]` 注释实现行高亮。 +**输入** +````md +```js +export default { + data () { + return { + msg: 'Highlighted!' // [!code highlight] + } + } +} +``` +```` +**输出** +```js +export default { + data() { + return { + msg: 'Highlighted!' // [!code highlight] + } + } +} +``` +### 自定义容器 +**输入** + +```md +::: info +This is an info box. +::: + +::: tip +This is a tip. +::: + +::: warning +This is a warning. +::: + +::: danger +This is a dangerous warning. +::: + +::: details +This is a details block. +::: +``` + +**输出** + +::: info +This is an info box. +::: + +::: tip +This is a tip. +::: + +::: warning +This is a warning. +::: + +::: danger +This is a dangerous warning. +::: + +::: details +This is a details block. +::: + +> [!IMPORTANT] +> VitePress 同样支持以标注的方式渲染 GitHub 风格的警报。它们和自定义容器的渲染方式相同。 + +### 标题锚点 +``` +# 使用自定义锚点 {#my-anchor} +``` +这允许将标题链接为 `#my-anchor`,而不是默认的 `#使用自定义锚点` + +### 代码块中聚焦 +在某一行上添加 `// [!code focus]` 注释将聚焦它并模糊代码的其他部分。 +此外,可以使用 `// [!code focus:]` 定义要聚焦的行数。 +**输入** +````md +```js +export default { + data () { + return { + msg: 'Focused!' // [!code focus] + } + } +} +``` +```` + +**输出** +``` +export default { + data() { + return { + msg: 'Focused!' // [!code focus] + } + } +} +``` ## 参考 [在 Hexo 中使用 NOTE 提示块](https://homulilly.com/post/hexo-use-note-and-tabs-block.html) -[GitHub上的Markdown警示样式内容块](https://typorachina.com/articles/1714104012888.html) \ No newline at end of file +[GitHub上的Markdown警示样式内容块](https://typorachina.com/articles/1714104012888.html) +[Markdown 扩展 | VitePress](https://vitepress.dev/zh/guide/markdown) \ No newline at end of file diff --git a/docs/src/999_Example/markdown-examples.md b/docs/src/999_Example/markdown-examples.md index 7290fab..5fdc0fd 100644 --- a/docs/src/999_Example/markdown-examples.md +++ b/docs/src/999_Example/markdown-examples.md @@ -32,7 +32,7 @@ export default { } ``` -## Custom Containers +### 自定义容器 **Input** @@ -80,6 +80,9 @@ This is a dangerous warning. This is a details block. ::: +> [!IMPORTANT] +> VitePress 同样支持以标注的方式渲染 GitHub 风格的警报。它们和自定义容器的渲染方式相同。 + ## More Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).