Markdown拡張

Frontmatter

YAMLフロントマターはすぐに使える

---
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']  #用于国际化处理
---

これらのデータは、すべてのカスタムおよびテーマコンポーネントと共に、ページの残りの部分で使用されます。

コードブロックのシンタックスハイライト

Markdown コードブロックで Shiki を使用して、色付きテキストで言語のシンタックスハイライトを実現します。Shiki は多数のプログラミング言語をサポートしています。コードブロックの開始バッククォートの後に有効な言語エイリアスを追加するだけで使用できます。

例えば

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

コードブロック内の行ハイライト

Input 入力

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

あるいは

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

Output 出力

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

単一行だけでなく、複数の単一行、範囲、またはその両方を指定することもできます：

行範囲：例えば {5-8} 、 {3-10} 、 {10-17}

複数の単一行：例えば {4,7,9}

行範囲と単一行：例 {4,7-13,16,23-27,40}

コードブロックに焦点を当てる

ある行に // [!code focus] コメントを追加すると、その行に焦点が当たり、コードの他の部分がぼやけます。

Input 入力

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

Output 出力

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

コードブロック内のカラー差分表示

行に // [!code --] または // [!code ++] コメントを追加すると、コードブロックの色を保ちながら、その行の差分が作成されます。

Input 入力

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

Output 出力

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

グループ分け

このように複数のコードブロックをグループ化できます：

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