VuePress EcosystemVuePress Ecosystem
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • append-date
  • markdown-container
  • markdown-ext
  • markdown-image
  • markdown-include
  • markdown-hint
  • markdown-math
  • markdown-stylize
  • markdown-tab
  • links-check
  • prismjs
  • revealjs
    • revealjs
    • Slide Demo
    • Reveal.js Themes
  • shiki

markdown-ext

@vuepress/plugin-markdown-ext

Add basic GFM support to VuePress with useful features.

Usage

npm i -D @vuepress/plugin-markdown-ext@next
.vuepress/config.ts
import { markdownExtPlugin } from '@vuepress/plugin-markdown-ext'

export default {
  plugins: [
    markdownExtPlugin({
      // options
    }),
  ],
}

Syntax

Footnote

  • Use [^Anchor text] in Markdown to define a footnote

  • Use [^Anchor text]: ... to describe footnote content

  • If there are multiple paragraphs in footnote, the paragraph show be double indented

Demo

Footnote 1 link[1].

Footnote 2 link[2].

Inline footnote[3] definition.

Duplicated footnote reference[2:1].

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.

Task list

  • Use - [ ] some text to render an unchecked task item.
  • Use - [x] some text to render a checked task item. (Capital X is also supported)
Demo
- [ ] Plan A
- [x] Plan B

Component

You can use component fence block to add a component into your markdown content. Both YAML and JSON format props data are supported:

  • YAML Recommended:

    ```component ComponentName
    # component data here
    ```
  • JSON:

    ```component ComponentName
    {
      // component data here
    }
    ```
DemoMr.HopeMr.Hope
```component Badge
text: Mr.Hope
type: tip
```

```component Badge
{
  "text": "Mr.Hope",
  "type": "tip"
}
```

v-pre

You can use any mustache syntax as raw text in v-pre container:

Demo

{{ abc }}

::: v-pre

{{ abc }}

:::

Options

gfm

  • Type: boolean

  • Details:

    Whether tweaks the behavior and features to be more similar to GitHub Flavored Markdown.

    markdown-it already supports tables and strike through by default. If this option is true, the following new features will be enabled:

    • Auto link (named linkify in markdown-it)
    • Hard breaks
    • Footnote
    • Task list

    Note: Not all behavior is exactly the same as GitHub Flavored Markdown.

footnote

  • Type: boolean
  • Default: false
  • Enabled in GFM: Yes
  • Details: Whether to enable footnote format support.

tasklist

  • Type: MarkdownItTaskListOptions | boolean

    interface MarkdownItTaskListOptions {
      /**
       * Whether disable checkbox
       *
       * @default true
       */
      disabled?: boolean
    
      /**
       * Whether use `<label>` to wrap text
       *
       * @default true
       */
      label?: boolean
    }
  • Default: false

  • Enabled in GFM: Yes

  • Details:

    Whether to enable tasklist format support. You can pass an object to config tasklist.

breaks

  • Type: boolean
  • Default: false
  • Enabled in GFM: Yes
  • Details: Whether convert \n in paragraphs into <br>s

linkify

  • Type: boolean
  • Default: false
  • Enabled in GFM: Yes
  • Details: Whether convert URL-like text into links

component

  • Type: boolean
  • Default: false
  • Details: Whether to enable component fence support

vPre

  • Type: boolean
  • Default: false
  • Details: Whether to enable v-pre wrapper.

  1. Footnote can have markup

    and multiple paragraphs. ↩︎

  2. Footnote text. ↩︎ ↩︎

  3. Text of inline footnote ↩︎

Edit this page on GitHub
Last Updated:: 4/12/25, 7:03 PM
Contributors: Mister-Hope
Prev
markdown-container
Next
markdown-image