DOCSEARCHbyAlgolia
Submit Docs

VitePress Documentation Examples

website·Indexed 30 days ago

https://chelin.netlify.app/

Examples demonstrating the use of VitePress runtime APIs and built-in markdown extensions, including syntax highlighting.

Tokens
454
Snippets
3
Records
4
Agent score
25%

What's inside VitePress

  1. Access site and page data using useData() in VitePress

    The useData() runtime API allows developers to retrieve the current state of the site's theme configuration, page metadata, and frontmatter. This hook is compatible with both .md (via <script setup>) and .vue files. It returns an object containing theme, page, and frontmatter properties.
    <script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

<template>
  <div>
    <pre>Theme Data: {{ theme }}</pre>
    <pre>Page Data: {{ page }}</pre>
    <pre>Frontmatter: {{ frontmatter }}</pre>
  </div>
</template>

  2. Reference the structure of VitePress useData() return values

    When calling useData(), the returned objects typically contain the following structures:

    • theme: Contains global configuration such as nav (navigation links), sidebar (sidebar structure), socialLinks, and search provider options.
    • page: Contains metadata about the current page, including title, description, relativePath, filePath, and the headers array.
    • frontmatter: Contains the raw YAML frontmatter defined at the top of the current Markdown file (e.g., outline: 'deep').

  3. Highlight specific lines in code blocks using VitePress

    VitePress uses Shikiji for syntax highlighting and supports line-highlighting. To highlight specific lines, add the line numbers in curly braces {} immediately after the language identifier in the code block fence.
    export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

  4. Create custom callout containers in VitePress Markdown

    VitePress provides built-in custom containers to create styled callout boxes. These are defined using the ::: type syntax, where the content is wrapped between the opening and closing triple-colon markers.
    ::: 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.
:::