Markdown Extension Examples
This page demonstrates some of the built-in markdown extensions provided by VitePress.
Syntax Highlighting
VitePress provides Syntax Highlighting powered by Shikiji, with additional features like line-highlighting:
Input
md
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
Output
js
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.
Runtime API Examples
This page demonstrates usage of some of the runtime APIs provided by VitePress.
The main useData()
API can be used to access site, theme, and page data for the current page. It works in both .md
and .vue
files:
md
<script setup>
import { useData } from 'vitepress'
const { theme, page, frontmatter } = useData()
</script>
### Theme Data
<pre>{{ theme }}</pre>
### Page Data
<pre>{{ page }}</pre>
### Page Frontmatter
<pre>{{ frontmatter }}</pre>
Theme Data
{ "nav": [ { "text": "Guide", "link": "/0-installation" }, { "text": "Discuss", "link": "https://github.com/activeadmin/activeadmin/discussions" }, { "text": "Demo", "items": [ { "text": "GitHub Repository", "link": "https://github.com/activeadmin/demo.activeadmin.info" }, { "text": "Demo App", "link": "https://demo.activeadmin.info/" } ] }, { "text": "4.0.0.beta13", "items": [ { "text": "Changelog", "link": "https://github.com/activeadmin/activeadmin/releases" }, { "text": "Contributing", "link": "https://github.com/activeadmin/activeadmin/blob/master/CONTRIBUTING.md" } ] } ], "sidebar": [ { "text": "Setup", "items": [ { "text": "Installation", "link": "/0-installation" }, { "text": "Configuration", "link": "/1-general-configuration" } ] }, { "text": "Resources", "items": [ { "text": "Working with Resources", "link": "/2-resource-customization" }, { "text": "Customize the Index page", "link": "/3-index-pages" }, { "text": "Index as a Table", "link": "/3-index-pages/index-as-table" }, { "text": "Custom Index View", "link": "/3-index-pages/custom-index" }, { "text": "CSV Format", "link": "/4-csv-format" }, { "text": "Forms", "link": "/5-forms" }, { "text": "Customize the Show Page", "link": "/6-show-pages" }, { "text": "Sidebar Sections", "link": "/7-sidebars" }, { "text": "Custom Controller Actions", "link": "/8-custom-actions" }, { "text": "Batch Actions", "link": "/9-batch-actions" }, { "text": "Decorators", "link": "/11-decorators" }, { "text": "Authorization Adapter", "link": "/13-authorization-adapter" } ] }, { "text": "Other", "items": [ { "text": "Custom Pages", "link": "/10-custom-pages" }, { "text": "Arbre Components", "link": "/12-arbre-components" }, { "text": "Gotchas", "link": "/14-gotchas" }, { "text": "Documentation Tips", "link": "/markdown-examples" } ] } ], "socialLinks": [ { "icon": "github", "link": "https://github.com/activeadmin/activeadmin" }, { "icon": "slack", "link": "https://activeadmin.slack.com/" } ], "editLink": { "pattern": "https://github.com/activeadmin/activeadmin/edit/master/docs/:path", "text": "Edit this page on GitHub" }, "footer": { "message": "Released under the MIT License.", "copyright": "Copyright © 2010-present" }, "search": { "provider": "local" } }
Page Data
{ "title": "Markdown Extension Examples", "description": "", "frontmatter": { "outline": "deep" }, "headers": [], "relativePath": "markdown-examples.md", "filePath": "markdown-examples.md" }
Page Frontmatter
{ "outline": "deep" }
More
Check out the documentation for the full list of markdown extensions and the full list of runtime APIs.