DOCSEARCHbyAlgolia
Submit Docs

VitePress Documentation

website·Indexed 31 days ago

https://20161101.xyz/vitepress

Documentation providing examples for VitePress runtime APIs and built-in markdown extensions, including syntax highlighting.

Tokens
436
Snippets
3
Records
4
Agent score
5%

What's inside VitePress

  1. Understand the structure of useData() return values

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

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

  2. Create custom callout containers in Markdown

    VitePress supports custom containers using the ::: syntax to create styled callout boxes. Available container types include info, tip, warning, danger, and details.
    ::: 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.
:::

  3. Highlight specific lines in code blocks using Shiki

    VitePress uses Shiki for syntax highlighting. You can highlight specific lines in a code block by adding a curly brace {} containing the line numbers immediately after the language identifier in the code fence.
    
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

  4. Access site and page data using useData()

    The useData() runtime API in VitePress allows developers to retrieve the current site's theme configuration, page metadata, and frontmatter. This API is compatible with both .md (Markdown) 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>