@mdit-vue/plugin-sfc

@mdit-vue/plugin-sfc

A markdown-it plugin to help transforming markdown to Vue SFC.

• Avoids rendering <script> and <style> tags and extract them into to markdown-it env.sfcBlocks.
• Supports extracting custom blocks.
• Provides env.sfcBlocks.template for convenience.

Install

npm i @mdit-vue/plugin-sfc

Usage

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

import MarkdownIt from 'markdown-it';
import { sfcPlugin } from '@mdit-vue/plugin-sfc';
import type { MarkdownItEnv } from '@mdit-vue/types';

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

const rendered = md.render(
  `\
# foo

<script>
console.log('bar')
</script>
`,
  env,
);

console.log(env.sfcBlocks);

Options

customBlocks

• Type: string[]

• Default: []

• Details:

  SFC custom blocks to be extracted.

  By default, only <script> and <style> tags will be extracted. You can set this option to support SFC custom blocks in markdown.

  For example, if you set this option to ['i18n'], the <i18n> tag in your markdown content will be extracted to env.sfcBlocks.customBlocks and won't appear in the rendered result.