DOCSEARCHbyAlgolia
Submit Docs

VitePress Examples

website·Indexed 29 days ago

http://www.onebits.com

Documentation and examples for VitePress, covering the use of runtime APIs and built-in markdown extensions including syntax highlighting.

Tokens
430
Snippets
3
Records
4
Agent score
0%

What's inside VitePress

  1. Understand the structure of useData() return values

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

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

  2. Highlight specific lines in code blocks using VitePress

    VitePress uses Shiki 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!'
    }
  }
}

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

    The useData() runtime API allows developers to access the current site's theme configuration, page-specific data, and the page's frontmatter. This API is compatible with both .md (Markdown) and .vue files.
    <script setup>
import { useData } from 'vitepress'

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

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

  4. Create custom alert containers in VitePress Markdown

    VitePress provides built-in custom containers for callouts and information blocks. These are created using the ::: type syntax. Supported 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.
:::