@mdit-vue/plugin-component

A markdown-it plugin to allow Vue components in markdown.

• Treats vue built-in components and unknown HTML tags as vue components (markdown-it would treat them as inline tags by default).
• Allows vue @ directive on native HTML tags.

Install

npm i @mdit-vue/plugin-component

Usage

This plugin will only take effects when the html option of markdown-it is enabled:

import { componentPlugin } from '@mdit-vue/plugin-component';
import MarkdownIt from 'markdown-it';

const md = MarkdownIt({ html: true }).use(componentPlugin, {
  // options
});

const rendered = md.render(
  `\
<!-- @ shorthand is supported -->
<Foo @click="onClick" />

<!-- multi-line syntax won't be wrapped with <p> -->
<Foo
  class="foo"
  :bar="bar"
/>
`,
);

Options

blockTags

• Type: string[]

• Default: []

• Details:

  Extra tags to be treated as block tags.

  By default, all standard HTML inline elements will be treated as inline tags (excluding Vue built-in special elements). All unknown elements will be assumed as Vue components, and will be treated as block tags (with slight differences).

  In some cases (should be rare though) you might want to force some tags to behave like block tags, then you can use this option to specify the tag names.

  Notice that this option is case-sensitive, and has higher priority than the inlineTags option.

inlineTags

• Type: string[]

• Default: []

• Details:

  Extra tags to be treated as inline tags.

  By default, only standard HTML inline elements will be treated as inline tags (excluding Vue built-in special elements). All unknown elements will be assumed as Vue components, and will be treated as block tags (with slight differences).

  Treating Vue components like block tags would work as expected in most cases. However, in some cases you might want to force some tags to behave like inline tags, then you can use this option to specify the tag names.

  Notice that this option is case-sensitive, and has lower priority than the blockTags option.