mdit-vue
@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-itenv.sfcBlocks. - Supports extracting custom blocks.
- Provides
env.sfcBlocks.templatefor convenience.
Install
npm i @mdit-vue/plugin-sfcUsage
This plugin will only take effects when the html option of markdown-it is enabled:
import { sfcPlugin } from '@mdit-vue/plugin-sfc';
import type { MarkdownItEnv } from '@mdit-vue/types';
import MarkdownIt from 'markdown-it';
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 toenv.sfcBlocks.customBlocksand won't appear in the rendered result.