@mdit-kdu/plugin-component v1.0.0

@mdit-kdu/plugin-component

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

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

Install

npm i @mdit-kdu/plugin-component

Usage

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

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

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 Kdu built-in special elements). All unknown elements will be assumed as Kdu 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 Kdu built-in special elements). All unknown elements will be assumed as Kdu components, and will be treated as block tags (with slight differences).

  Treating Kdu 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.