Markdown Extensions

Frontmatter

YAML frontmatter out of the box

---
title: 写作                 # 标题：不填则默认使用文件名（或主题的默认逻辑）
date: 2025-11-19            # 日期：不填则会使用文件的最后修改时间
tags:                       # 标签：不填则表示没有标签
  - kecare
  - blog
desc: 这是一段简介           # 简介：用于首页/落地页文章卡片；不填可用正文开头截取
author: 作者                # 作者：不填则为空
coverSrc: "https://example.com/cover.webp" # 封面/背景图：不填则使用主题默认图
sticky: 1                   # 置顶：数字越大越靠前；不填则按日期倒序
menu: kecare-docs           # 菜单 key：用于挂载左侧菜单
translate: ['zh-CN', 'en-US', 'ja-JP']  #用于国际化处理
---

This data will be used by the rest of the page along with all custom and theme components.

Syntax Highlighting in Code Blocks

Use Shiki to achieve language syntax highlighting with colored text in Markdown code blocks. Shiki supports multiple programming languages. You simply need to add a valid language alias after the opening backticks of the code block.

For example

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

Line Highlighting in Code Blocks

Input

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

Or perhaps

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

Output

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

In addition to single lines, you can also specify multiple single lines, ranges, or a combination of both:

Line range: e.g. {5-8}, {3-10}, {10-17}

Multiple single lines: e.g. {4,7,9}

Line ranges and single lines: e.g. {4,7-13,16,23-27,40}

Focusing on Code Blocks

Adding // [!code focus] comment on a line will focus that line and blur the rest of the code.

Input

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

Output

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

Colored Diff Display in Code Blocks

Adding // [!code --] or // [!code ++] comments on a line will create a diff for that line while preserving the code block's coloring.

Input

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

Output

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

Grouping

You can group multiple code blocks like this:

Input

::: tabs

@tab 这是第一个标题

这是第一个标签页的内容。
- 可以包含 Markdown
- **加粗**,*斜体*等

@tab 这是第二个标题

这是第二个标签页的内容。
1. 有序列表
2. 第二个项目

:::

::: tabs

@tab js[config.js]

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

export default config
```

@tab ts[config.ts]

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

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

export default config
```
:::

Output

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

export default config

import type { UserConfig } from 'vitepress'

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

export default config