当然container 的方式也顺便兼容下,里面的内容可以写写 markdown: ::: demo src="./demo-example.vue" title="Demo 演示" 这是一段描述,可以用 `Markdown` 来写 ::: 根据vitepress 配置文档,开发者可以添加 markdown-it 插件。我们直接开始模仿写: 查看代码 import mdContainer from 'markdown-it-container...
自定义容器是MD文档默认并不支持的一种语法,在Vuejs的文档有很多的应用,实现自定义容易需要用到markdown-it-container模块~ markdownIt通过插件的形式利用markdown-it-container来实现自定义容器,通过配置validate来做渲染前的语法校验,通过render函数来组中容器部分的HTML结构~ ::: warning *here be dragons* :::...
自定义容器是MD文档默认并不支持的一种语法,在Vuejs的文档有很多的应用,实现自定义容易需要用到markdown-it-container模块~ markdownIt通过插件的形式利用markdown-it-container来实现自定义容器,通过配置validate来做渲染前的语法校验,通过render函数来组中容器部分的HTML结构~ 代码语言:javascript 复制 ::: warning...
在VitePress 项目中,Mermaid 通常是通过一个插件来集成的,这个插件是 @vitejs/plugin-markdown-it-container 和markdown-it-mermaid 的组合。不过,VitePress 本身已经内置了对 Mermaid 的支持,所以你只需要确保你的 VitePress 版本支持 Mermaid 即可。通常,这意味着你需要安装一个较新版本的 VitePress。 如果你的项目...
markdown: { config: md => { md.use(mdContainer, 'demo', { validate(params: string) { return !!params.trim().match(/^demo\s*(.*)$/); }, render( tokens: { nesting: number; info: string; content: string; type: string; children?: { content: string...
npm install markdown-it-vitepress-demo --save-dev Usage // .vitepress/config.jsexportdefaultdefineConfig({markdown:{config(md){md.use(require('markdown-it-vitepress-demo'))},},}) Register your<demo-container>component intheme/index.ts|js: ...
import{ slugify } from"@mdit-vue/shared"; const props = defineProps({ title: String, data: { type: Array, default: [], }, }); // 生成侧边栏markdown的目录 const createTitle = computed(() => { returnslugify(props.title);
type ContainerArgs = [typeof container, string, MarkdownItContainer.ContainerOpts ] function createContainer( klass: string, defaultTitle: string, md: MarkdownIt ): ContainerArgs { return [ container, klass, { marker: '`', render(tokens, idx, _options, env) { const token = tokens[idx] ...
import container from 'markdown-it-container' // https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/containers.ts // [typeof container, string, { render: RenderRule }] type ContainerArgs = [any, string, { render: Function }] export function createContainer( klass: str...
markdown-it-container: 3.0.0 rimraf: 3.0.2 sass: registry.npmmirror.com/sass/1.56.2 vitepress: registry.npmmirror.com/vitepress/1.0.0-alpha.30_sass@1.56.2 vitepress-theme-vuetom: link:../vuetom packages/vuetom: specifiers: ...