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.

Math Equation

Inline style

$a^2+b^2=c^2$

Display style

$$a=\frac{b+c}{d}$$

Display style with custom environment

$$\begin{array}{lcl}a+b+c+d& =& e+f+\\ & & g+h\end{array}$$

Lucide Icons

You can use Lucide icons directly in your markdown content.

Basic Usage

Here's a simple heart icon:

Customizing Icons

You can change the size and color:

• Default size:
• Larger icon:
• Colored icon:

Icons Inline with Text

You can place icons inline with text:

• Click the icon to access settings
• Make sure to your work regularly
• Warning: This action cannot be undone

Available Icons

For a complete list of available icons, visit the Lucide Icons website.

When using an icon, use the Pascal case name of the icon (e.g., AlertCircle not alert-circle).

More

Check out the documentation for the full list of markdown extensions.