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

Footnote 1 link[1].

Footnote 2 link[2].

Inline footnote[3] definition.

Duplicated footnote reference[2:1].

Demo
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
}
```
Mr.HopeMr.Hope
Demo
```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:

{{ abc }}

Demo
::: v-pre

{{ abc }}

:::

Options

gfmboolean

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.

footnotegfm: Yesboolean

Whether to enable footnote format support.

tasklistgfm: YesMarkdownItTaskListOptions | boolean

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

tasklist.disabledboolean
Defaulttrue

Whether disable checkbox.

tasklist.labelboolean
Defaulttrue

Whether use <label> to wrap text.

breaksgfm: Yesboolean

Whether convert \n in paragraphs into <br>s.

linkifygfm: Yesboolean

Whether convert URL-like text into links.

componentboolean

Whether to enable component fence support.

vPreboolean

Whether to enable v-pre wrapper.

cjkFriendlyboolean

Whether to enable CJK-friendly support for emphasis marks. When not set, automatically enabled for CJK languages (zh, ja, ko) detected in site configuration.

  1. Footnote can have markup

    and multiple paragraphs. ↩︎

  2. Footnote text. ↩︎ ↩︎

  3. Text of inline footnote ↩︎