Skip to content

# 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!'
        }
      }
    }
    ```

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

Output

js

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

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

## Custom Containers ​

Input

md

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

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

## More ​

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