vitepress/__tests__/e2e/markdown-extensions/index.md

Markdown Extensions

Links

Internal Links

• home
• markdown-extensions
• heading
• omit extension
• .md extension
• .html extension

External Links

VitePress on GitHub

GitHub-Style Tables

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

Emoji

• 🎉
• 💯

Table of Contents

toc

Custom Containers

Default Title

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

Custom Title

::: danger STOP Danger zone, do not proceed :::

::: details Click me to view the code

console.log('Hello, VitePress!')

:::

Line Highlighting in Code Blocks

Single Line

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

Multiple single lines, ranges

export default {
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum',
    }
  }
}

Comment Highlight

export default { // [!code focus]
  data() { // [!code hl]
    return {
      msg: 'Removed' // [!code --]
      msg: 'Added' // [!code ++]
      msg: 'Error', // [!code error]
      msg: 'Warning' // [!code warning]
    }
  }
}

Line Numbers

const line1 = 'This is line 1'
const line2 = 'This is line 2'

Import Code Snippets

Basic Code Snippet

<<< @/markdown-extensions/foo.md

Specify Region

<<< @/markdown-extensions/foo.md#snippet

With Other Features

<<< @/markdown-extensions/foo.md#snippet{1 ts:line-numbers} [snippet with region]

Code Groups

Basic Code Group

::: code-group

/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
  // ...
}

export default config

import type { UserConfig } from 'vitepress'

const config: UserConfig = {
  // ...
}

export default config

:::

With Other Features

::: code-group

<<< @/markdown-extensions/foo.md

<<< @/markdown-extensions/foo.md#snippet{1 ts:line-numbers} [snippet with region]

:::

Markdown File Inclusion

Markdown At File Inclusion