Markdown Extensions

Kecare provides rich extension features on top of the standard Markdown syntax, making your documents more vivid and professional.

Front Matter

YAML Front Matter works out of the box. You can add metadata at the beginning of your article:

---
title: 写作指南
date: 2025-11-19
tags:
  - kecare
  - blog
desc: 这是一段简介
author: 作者
coverSrc: "https://example.com/cover.webp"
sticky: 1
menu: kecare-docs
translate: ['zh-CN', 'en-US', 'ja-JP']
---

These data will be passed to the theme components for use on the page. For more details, please refer to the Writing documentation.

Code Block Syntax Highlighting

Kecare uses Shiki to implement syntax highlighting for code blocks, supporting multiple programming languages.

Basic Usage

Add language identifier after the starting backticks of a code block:

```js
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello Kecare!'
    }
  }
}
```

Supported Languages

Shiki supports almost all mainstream programming languages

Code Block Line Highlighting

You can highlight specific lines in code blocks to make it easier for readers to focus on key content.

Method 1: Line Number Range

Add {line numbers} after the language identifier:

```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'  // 这一行会被高亮
    }
  }
}
```

Highlight Multiple Lines

Support for multiple format combinations:

You can also use inline comments by adding // [!code highlight] to the line to achieve highlighting

Effect Display

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

Code Focus

Using the focus feature allows a specific line to be highlighted while blurring other lines. Add the // [!code focus] comment to the target line:

Effect Display

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

Code Diff Display

In code comparison scenarios, the diff display feature can be used to mark lines that have been added or deleted.

Adding a // [!code --] or // [!code ++] comment on a line will create a diff for that line while preserving the color of the code block.

Effect Display

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

Code Grouping (Tabs)

You can group multiple code blocks into tabs for easy switching and viewing.

Basic Usage

::: tabs

@tab js [config.js]

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

export default config
```

@tab ts [config.ts]

```ts
import type { UserConfig } from 'vitepress'

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

export default config
```

:::

Effect Display

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

export default config

import type { UserConfig } from 'vitepress'

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

export default config