Markdown Extensions

VitePress uses markdown-it as its Markdown renderer and adds many useful extensions on top of it, making content creation easier and more powerful.

Frontmatter

You can use YAML frontmatter at the top of each Markdown file to define metadata. This data can be used on the page, in components, and in configuration files.

---
title: My Document Title
description: This is a page description.
home: true
---

title and description will be automatically used by VitePress to set the page's <title> and <meta name="description"> tags.

Header Anchors

All headers (from # to ######) will automatically get an anchor link. When you hover over a header, a clickable § icon will appear. This makes it easy for users to share links to specific sections.

Links

VitePress intelligently handles links in Markdown. Relative links pointing to .md files will be converted to correct route links, while external links will automatically have target="_blank" rel="noopener noreferrer" added.

Custom Containers

You can use custom containers to highlight specific information. This is a very useful feature for displaying tips, warnings, or danger messages.

Syntax

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a danger warning
:::

::: details
This is a collapsible details block

Here is more information...
:::

Effect

TIP

This is a tip

WARNING

This is a warning

DANGER

This is a danger warning

Syntax Highlighting

VitePress has built-in syntax highlighting support for code blocks, powered by Shiki. You just need to specify the language of the code block.

```javascript
export default {
  name: 'MyComponent'
}
```

Line Highlighting

You can add {} after the code block language to specify the lines you want to highlight.

```js{4-5,8}
// ... (code)
const a = 1;
const b = 2;

function add(a, b) { 
  return a + b;      
}

add(a, b); 

```

• {4-5,8}: Highlight lines 4, 5, and 8.
• // [!code focus]: Focus highlighting for the current line.
• // [!code ++]: Add highlighting (green).
• // [!code --]: Delete highlighting (red).

Import Code Snippets

You can import code snippets directly from existing files, which is very useful for showing real code examples.

<<< @/path/to/your/code/file.js

You can also specify the line range to import:

<<< @/path/to/your/code/file.js{2-10}

Using Vue in Markdown

One of VitePress's standout features is the ability to seamlessly use Vue components within Markdown files. You can use them just like in regular Vue Single File Components (SFCs), including Vue template syntax and components.

This is a Markdown paragraph.

<MyVueComponent :prop="someValue" />

{{ 1 + 1 }} <!-- Output: 2 -->

This provides endless possibilities for creating rich, interactive documentation.