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

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

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:

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