@mdit-vue/plugin-sfc
![license](https://badgen.net/github/license/mdit-vue/mdit-vue)
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, {
});
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.