jxlust-jmd-vue

基于 Vue3 的 Markdown 渲染组件库，支持代码高亮、数学公式、流程图、表情、警告块等丰富扩展，适用于文档、博客、知识库等场景。

安装

pnpm add jxlust-jmd-vue
# 或
npm install jxlust-jmd-vue

使用

全局引入样式

import "jxlust-jmd-vue/style.css";

基本用法

<script setup lang="ts">
import { JVueMarkdown, CodeHl, Katex } from "jxlust-jmd-vue";
import "jxlust-jmd-vue/style.css";
import baseMd from "./base.md?raw";

const tex = "c = \\pm\\sqrt{a^2 + b^2}";
</script>

<template>
  <div>
    <Katex :tex="tex" />
    <JVueMarkdown :content="baseMd">
      <template #codeBlock="{ language, code }">
        <CodeHl :showLineNum="true" :language="language" :code="code" />
      </template>
      <template #fallback="{ error }"> error:{{ error }} </template>
    </JVueMarkdown>
  </div>
</template>

支持特性

• 标准 Markdown 语法
• 代码高亮（支持多语言，显示行号）
• 数学公式（KaTeX）
• Mermaid 流程图/时序图/甘特图
• 表情短码（如 :joy:）
• 警告块（NOTE/TIP/IMPORTANT/WARNING/CAUTION）
• 脚注、分割线、表格、任务列表等
• 支持自定义插槽扩展渲染

插槽说明

• codeBlock：自定义代码块渲染
• fallback：渲染错误时的兜底内容

进阶用法

可通过 remarkPlugins、rehypePlugins、remarkRehypeOptions 等 props 扩展 Markdown 解析能力。

<JVueMarkdown
  :content="md"
  :remarkPlugins="[yourRemarkPlugin]"
  :rehypePlugins="[yourRehypePlugin]"
/>

组件导出

• JVueMarkdown：主渲染组件
• VueMarkdown、VueMarkdownPro、VueMarkdownWorker：不同功能/性能版本
• CodeHl：代码高亮组件
• Katex：数学公式组件

典型 Markdown 示例

详见 app/src/components/base.md。

开发与构建

pnpm install
pnpm run build