Markdown Extension Examples

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

Syntax Highlighting

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

Input

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

Output

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

Custom Containers

Input

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

Sample Fetched JSON Data from Web (See JS Code in script)

Config data from useData

Page: { "lang": "en-US", "dir": "ltr", "title": "RN's Test Site", "description": "Made With VitePress", "base": "/", "head": [], "router": { "prefetchLinks": true }, "appearance": true, "themeConfig": { "nav": [ { "text": "Home", "link": "/" }, { "text": "Examples", "link": "/markdown-examples" } ], "sidebar": [ { "text": "Examples", "items": [ { "text": "Markdown Examples", "link": "/markdown-examples" }, { "text": "More MD Examples", "link": "/markdown" }, { "text": "Runtime API Examples", "link": "/api-examples" } ] } ], "socialLinks": [ { "icon": "github", "link": "https://github.com/vuejs/vitepress" } ], "footer": { "message": "Vitepress Powered Site", "copyright": "Copyright © 2025" } }, "locales": {}, "scrollOffset": 134, "cleanUrls": false, "localeIndex": "root" }

Sample Vue Components (see components folder)

Vue Wikipedia

This first post is just a placeholder for a Vue post.

JavaScript Wikipedia

The second post is also a placeholder for a JavaScript post.