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)

JSON Data imported from vitepress SRC directory

{ "name": { "value": "Rick", "invalid": "false", "message": "this is a message" } }

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" }, { "text": "Pinboard Topics", "link": "/pinboard" }, { "text": "Javascript Links", "link": "/javascript" }, { "text": "Node Links", "link": "/node" }, { "text": "CSS/HTML Links", "link": "/csshtml" }, { "text": "Reports List", "link": "/reports_index.md" } ] } ], "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.