Markdown Extension Examples

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

Syntax Highlighting

VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:

[aceware]

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are super super super neat ya	$1

Input

<script type="text/javascript">
$(document).ready(function ()
 {
      coursesInGroup(':ALL','##MapExt##');
      $(".groupCounter").each(function (index) {
       if( $(this).text().length==0)
              $(this).text('(No courses available)');
      })
 })
</script>

Output

<script type="text/javascript">
$(document).ready(function ()
 {
      coursesInGroup(':ALL','##MapExt##');
      $(".groupCounter").each(function (index) {
       if( $(this).text().length==0)
              $(this).text('(No courses available)');
      })
 })
</script>

Input

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

Output

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

Custom Containers

Input

::: info
This is an info boxxxx.
:::

::: 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.

More

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