Markdown Extension Examples

config.mts

import { defineConfig } from "vitepress"

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "Rubyc's Blog",
  description: "苑畅的博客 采购 易经 真理",
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: "主页", link: "/" },
      { text: "采购", link: "/采购" },
      { text: "易经", link: "/易经" },
      { text: "真理", link: "/真理" },
      { text: "网站样式", link: "/网站样式" },
      { text: "关于", link: "/关于" },
    ],

    sidebar: [
      {
        text: "Examples",
        items: [
          { text: "Markdown Examples", link: "/markdown-examples" },
          { text: "Runtime API Examples", link: "/api-examples" },
        ],
      },
    ],
    footer: {
      message: "Released under the MIT License.",
      copyright: "Copyright © 2025-present Rubyc",
    },

    socialLinks: [
      { icon: "github", link: "https://github.com/vuejs/vitepress" },
    ],
  },
})

Syntax Highlighting

VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:

This page demonstrates some of the built-in markdown extensions provided by VitePress.

Input

```js{4}
// 4代表需要高亮的行数
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

---

**Output**

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

## Custom Containers

**Input**

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

**Output**

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

## More

Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).