@mt-plugin/mt-plugin-container v0.0.2

容器插件

生成对应结构的Html容器，样式需要设置样式，可以参考custom-block.scss

准备

通过unplugin-vue-markdown配置，需要提前安装

unplugin-vue-markdown

npm i unplugin-vue-markdown

• Vite

// vite.config.ts
import Vue from '@vitejs/plugin-vue'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
    }),
    Markdown({ /* options */ }),
  ],
})

• Markdown中使用Vue组件

直接导入组件或者使用vite-plugin-components并配置md类型

• Frontmatter

• Document head and meta

使用方式

• 安装

pnpm add @mt-plugin/mt-plugin-container

• 配置

使用预设容器

Markdown({
    headEnabled: true, // <--
    async markdownItSetup(md) {
        // 使用预设的容器：warning、tip、danger
        md.use(presetContainer)
    )
    },
})

自定义容器

Markdown({
    headEnabled: true, // <--
    async markdownItSetup(md) {
        // 使用自定义容器，更多配置参考ContainerPluginOptions
        md.use(containerPlugin, { type: 'info' })
    )
    },
})