You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
vitepress/__tests__/e2e/markdown-extensions/index.md

3.3 KiB

Markdown Extensions

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

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

Image Lazy Loading

vitepress logo