vitepress中MarkDown扩展

小趴菜bin
1,050 阅读6分钟

markdown扩展

上一章vitepress - 开始之前 - 掘金 (juejin.cn)

前面简单提到了markdown的语法要参考markdown官网之外，对于vitepress，它自己也有一些内置的扩展语法，非常好用！

标题锚点 {#jump}

标题锚点，顾名思义，当你点击某一个标题时，会自动跳转到对应内容。

标题锚点分：自动锚点和自定义锚点

自动锚点：

当不做任何设置时，采用的时自动锚点。可以使用 markdown.anchor 选项配置锚点的渲染。

自定义锚点：

如果要使用自定义锚点，请在标题后面添加后缀{#my-anchor}

可以这么理解：

// {#jump} - 这是设置id
// [跳转到标题锚点](#jump) - 这是设置a的href
// 当我们点击“跳转到标题锚点”，会跳转到{#jump}所在的标题位置

跳转到标题锚点

还有更多用法，例如跳转到站外链接，跳转到当前文档外连接等等

::: code-group

// [名称](绝对路径地址)
// [百度](https://www.baidu.com/)

// [名称](相对路径地址)
// [名称](./index.md) - 后缀可带可不带

:::

frontmatter

这个配置我也没搞老大明白，感觉有点像自定义页面配置的，具体的话还是等研究透彻了，再来写一些注释。目前就以介绍为主。

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

此数据将可用于页面的其余部分，以及所有自定义和主题组件。

友情提示：vitepress创建完成之后的index.md文件就是用的这个哟！

表格

啊，表格超级麻烦

标题标题标题
内容内容内容
内容内容内容
内容内容内容

我需要快捷键（怒吼！）！！！

emoji表情

markdown中也有一些内置表情，但是vitepress中也有，就看你用哪个习惯了

:tada: :100:

:tada: :100:

表情大全

目录表

[[toc]]

会根据当前文档的标题生成创建目录

[[toc]]

自定义容器


::: 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.
:::

输出

::: 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. :::

警报

::: code-group

> [!NOTE]
> 强调用户在快速浏览文档时也不应忽略的重要信息。

> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。

> [!IMPORTANT]
> 对用户达成目标至关重要的信息。

> [!WARNING]
> 因为可能存在风险，所以需要用户立即关注的关键内容。

> [!CAUTION]
> 行为可能带来的负面影响。

:::

输出

[!NOTE] 强调用户在快速浏览文档时也不应忽略的重要信息。

[!TIP] 有助于用户更顺利达成目标的建议性信息。

[!IMPORTANT] 对用户达成目标至关重要的信息。

[!WARNING] 因为可能存在风险，所以需要用户立即关注的关键内容。

[!CAUTION] 行为可能带来的负面影响。

同样的道理，如果你想以中文显示警告标题，就是加空格和标题内容

> [!NOTE] 默认警告
> 强调用户在快速浏览文档时也不应忽略的重要信息。

[!NOTE] 默认警告 强调用户在快速浏览文档时也不应忽略的重要信息。

代码块语法高亮

VitePress 使用 Shiki 在 Markdown 代码块中使用彩色文本实现语法高亮。Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头:

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

```html
<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>
```

结果

export default {
  name: 'MyComponent',
  // ...
}

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

代码块行高亮

在需要高亮的行数添加到代码块语言后面

例如：js{行数:number}

```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}

也可以使用 // [!code highlight] 注释实现行高亮。

```js
export default {
  data () {
    return {
      msg: 'Highlighted!' //[!code highlight]
    }
  }
}
```

export default {
  data () {
    return {
      msg: 'Highlighted!' // [!code highlight]
    }
  }
}

代码块中聚焦

在某一行上添加 // [!code focus] 注释将聚焦它并模糊代码的其他部分。

此外，可以使用 // [!code focus:<lines>] 定义要聚焦的行数。

```js
export default {
  data () {
    return {
      msg: 'Focused!' //[!code focus]
    }
  }
}
```

输出

export default {
  data () {
    return {
      msg: 'Focused!' // [!code focus]
    }
  }
}

代码块中颜色差异

在某一行添加 // [!code --] 或 // [!code ++] 注释将会为该行创建 diff，同时保留代码块的颜色。

```js
export default {
  data () {
    return {
      msg: 'Removed' //[!code --]
      msg: 'Added' //[!code ++]
    }
  }
}
```

输出

export default {
  data () {
    return {
      msg: 'Removed' // [!code --]
      msg: 'Added' // [!code ++]
    }
  }
}

高亮“错误”和“警告”

在某一行添加 // [!code warning] 或 // [!code error] 注释将会为该行相应的着色

```js
export default {
  data () {
    return {
      msg: 'Error', //[!code error]
      msg: 'Warning' //[!code warning]
    }
  }
}
```

输出

export default {
  data () {
    return {
      msg: 'Error', // [!code error]
      msg: 'Warning' // [!code warning]
    }
  }
}

行号

全局配置

局部配置 - 当使用局部配置时会覆盖全局配置

全局配置

// 在config.mts中配置
export default {
  markdown: {
    lineNumbers: true
  }
}

局部配置

可以在代码块中添加 :line-numbers / :no-line-numbers 标记来覆盖在配置中的设置。

还可以通过在 :line-numbers 之后添加 = 来自定义起始行号，例如 :line-numbers=2 表示代码块中的行号从 2 开始。

```ts {1}
// 默认禁用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers {1}
// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers=2 {1}
// 行号已启用，并从 2 开始
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```

输出

// 默认禁用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'

// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'

// 行号已启用，并从 2 开始
const line3 = 'This is line 3'
const line4 = 'This is line 4'

导入代码片段

可以通过下面的语法来从现有文件中导入代码片段：

<<< @/filepath

此语法同时支持行高亮：

<<< @/filepath{highlightLines}

也可以指定语言

<<< @/snippets/snippet.cs{c#}

<!-- 带行高亮: -->

<<< @/snippets/snippet.cs{1,2,4-6 c#}

<!-- 带行号: -->

<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}

如果无法从文件扩展名推测出源语言，这将会很有帮助

代码组

使用code-group进行代码分组

::: code-group

```js [config.js]
/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
  // ...
}

export default config
```

```ts [config.ts]
import type { UserConfig } from 'vitepress'

const config: UserConfig = {
  // ...
}

export default config
```

:::

::: code-group

/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
  // ...
}

export default config

import type { UserConfig } from 'vitepress'

const config: UserConfig = {
  // ...
}

export default config

:::

也可以在代码组中导入代码片段

::: code-group

<!-- 文件名默认用作标题 -->

<<< @/snippets/snippet.js

<!-- 也可以提供定制的代码组 -->

<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]

:::

包含markdown文件

可以使用此方式在一个markdown文件中内嵌另一个markdown文件

MarkDown扩展

数学方程

这个是可选的，具体请参考官方网址Markdown扩展

图片懒加载

通过在配置文件中将 lazyLoading 设置为 true，可以为通过 markdown 添加的每张图片启用懒加载。

export default {
  markdown: {
    image: {
      // 默认禁用图片懒加载
      lazyLoading: true
    }
  }
}

高级配置

...

下一篇vitepress中如何使用vue组件、语法 - 掘金 (juejin.cn)

avatar
文章
阅读
粉丝