Markdown Extension Examples

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

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.

My own example

Input

<AposTwoColumns>
  <template #leftColumn>
    <AposCtaButton
      detail-heading="Series"
      title="Clickable example"
      content="Clickable content"
      url="/get-started"
    />
  </template>
  <template #rightColumn>
    <AposCtaButton
      detail-heading="Tutorial"
      title="Unclickable title"
      content="Unclickable content"
    />
  </template>
</AposTwoColumns>

<AposTwoColumns>
  <template #leftColumn>
    <AposCtaButton
      detail-heading="Tutorial"
      title="Title 3"
      content="Content 3"
    />
  </template>
  <template #rightColumn>
    <AposCtaButton
      detail-heading="Tutorial"
      title="Title 4"
      content="Content 4"
    />
  </template>
</AposTwoColumns>

Output

Clickable example

Clickable content

Unclickable title

Unclickable content

Title 3

Content 3

Title 4

Content 4

More

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