markdown 里面解析vue 自定义组件，并在自定义组件里面加载markdown　文件

效果如下

markdown文件.png

鼠标移动到tip 上.png

使用VkMarkdown 来解析 自定义组件

安装

npm i @vunk/markdown

文档

引入

import { VkMarkdown, VkRendererTemplate, VkTemplatesDefault } from '@vunk/markdown';

使用 :fences="['popover', 'tip']" 自定义组件
使用 VkRendererTemplate 组件定义容器的自定义渲染方式：

定义渲染模板

  <VkRendererTemplate type="fence:popover">
 <template #default="{ raw, Renderer }">
    <!-- 自定义警告组件 -->
    <div class="warning-box">
      <h4>⚠️ 警告</h4>
      <Renderer :source="raw.children"></Renderer>
    </div>
  </template>
</VkRendererTemplate> 模板里

vue 代码

tip 组件使用element 的popover

<el-popover class="box-item" placement="top" width="400">
    <template #reference>
        提示
  </template>
</el-popover>

使用VkMarkdown

 <div class="summary-container">
    <VkMarkdown :source="currentObj" :fences="['popover', 'tip']">
      <VkTemplatesDefault></VkTemplatesDefault>

      <VkRendererTemplate type="fence:popover">
        <template #default="{ raw, Renderer }">
          <el-popover class="box-item" placement="top" width="400">
            <template #reference>
              <div class="citation-container">
                <div class="text-[12px] color-[#4e5969] pointer underline inline-block">
                  ({{ raw.content }})
                </div>
                <div class="annotation color-[#4e5969]">
                  [{{ getContent(raw.info.split(' ')[1], true).index }}]
                </div>
              </div>
            </template>
            <div class="w-full">
              <SummaryTip :data="getContent(raw.info.split(' ')[1], true)" />
            </div>
          </el-popover>
        </template>
      </VkRendererTemplate>
    </VkMarkdown>

script 里面自定义组件 “popover”

const source = `
# Custom Fence Renderer Example
\`\`\`popover
测试popover
\`\`\`
\`\`\`tip
测试Tip
\`\`\`

popover 里面嵌套要提示的markdown 文档

使用 “vue3-markdown-it”组件

import Markdown from 'vue3-markdown-it';
 <Markdown :source="currentObj?.obj?.abstractZh" class="markdown" />