Markdown Examples

This page demonstrates general markdown usage and some of the built-in markdown extensions provided by VitePress.

Images

Input

![API Image](/assets/images/api.png)

Output

Syntax Highlighting

VitePress provides Syntax Highlighting powered by Shiki, 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.

HTML

HTML can be used in markdown files for any complex content.

HTML

<dialog id="my-dialog">
  <button autofocus onclick="document.querySelector('#my-dialog').close()">Close</button>
  <p>This is a html dialog!</p>
</dialog>
<button onclick="document.querySelector('#my-dialog').showModal()">Show the dialog</button>

CSS

dialog {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

Result

This is a html dialog!

More

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