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]

:::

Group Name Basic

::: code-group name=installs

npm install vitepress

pnpm add vitepress

:::

Group Name Second Instance (Same Name for Sync Test)

::: code-group name=installs

npm run docs

pnpm run docs

:::

Group Name with Hyphens and Underscores

::: code-group name=install_methods-v2

npm install vitepress@next

pnpm add vitepress@next

:::

Group Name with Spaces (Should be Rejected)

::: code-group name="install methods"

npm install vitepress

yarn add vitepress

:::

Group Name with Invalid Characters (Should be Rejected)

::: code-group name=install@methods!

npm install vitepress

pnpm add vitepress

:::

Markdown File Inclusion

Markdown At File Inclusion

Markdown Nested File Inclusion

Markdown File Inclusion with Range

Markdown File Inclusion with Range without Start

Markdown File Inclusion with Range without End

Markdown At File Region Snippet

Markdown At File Range Region Snippet

Markdown At File Range Region Snippet without start

Markdown At File Range Region Snippet without end

Markdown File Inclusion with Header

Image Lazy Loading