Markdown Parse Render

支持markdown文本的流式渲染，利用vue的响应式系统，将markdown文本解析为vnode节点，解决图片图表等元素重复渲染的问题；同时支持自定义块级语法及内容自定义渲染

特性

• 支持markdown文本的流式渲染
• 解决流式传输中重复渲染的问题
• 利用vue的响应式系统，将markdown文本解析为vnode节点
• 支持渲染为vue组件
• 内置对echarts图表及mermaid语法的渲染支持
• 支持自定义块级语法及内容自定义渲染

安装

npm install markdown-parse-render

使用

简单使用

import MarkdownRender from 'markdown-parse-render';
import "markdown-parse-render/style.css"

const markdown_text = `# Hello Markdown
This is a simple markdown text example with **echarts** and *mermaid* text.
::: echarts
option = {
  title: {
    text: '用户增长趋势',
    subtext: '最近30天'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['新注册用户', '活跃用户', '付费用户']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: Array.from({length: 30}, (_, i) => \`\${i + 1}日\`)
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '新注册用户',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: Array.from({length: 30}, () => Math.floor(Math.random() * 100 + 50))
    },
    {
      name: '活跃用户',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: Array.from({length: 30}, () => Math.floor(Math.random() * 200 + 100))
    },
    {
      name: '付费用户',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: Array.from({length: 30}, () => Math.floor(Math.random() * 50 + 20))
    }
  ]
}
:::

::: mermaid
graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[加载用户数据]
    B -->|否| D[跳转登录页]
    C --> E[显示主页]
    D --> F[显示登录表单]
    F --> G{登录是否成功?}
    G -->|是| C
    G -->|否| H[显示错误信息]
    H --> F
:::
`;

<template>
  <MarkdownRender :content=markdown_text></MarkdownRender>
</template>

配置项

import { MermaidRenderProps, EChartsRenderProps } from 'markdown-parse-render';

interface MarkdownRenderProps {
  content: string; // markdown文本内容s
  theme?: 'default' | 'dark' | 'light'; // 主题，默认dark
  options?: {
    mermaid?: MermaidRenderProps['options']; // mermaid的配置项
    echarts?: EChartsRenderProps['options']; // echarts的配置项
  };
}

自定义语法

Markdown Parse Render支持自定义语法的解析和渲染，你可以通过定义自定义块级语法和内容渲染来扩展Markdown的功能。

// 在 main.ts 中，以确保对markdown自定义插件的注册只进行一次
import { md, mdCustomPlugin } from 'markdown-parse-render';
/**
 * 注册自定义语法
 * @params mdCustomPlugin 包中内置的注册插件工具
 * @params customCodeBlocks 规则名称
 * @params customCodeBlocksSymbol 自定义语法的开始和结束，这里的符号至少存在3个及以上才认为是自定义语法
 * @params options 配置项 {
 *  render: customCodeBlockRender // 自定义渲染函数, 该函数接收5个参数
 *      - type: string, // 自定义语法符号后的关键字
        - content: string, // 包含的内容文本
        - attr: string, // 自定义语法符号后的属性
        - isClosed: boolean, // 是否闭合
        - options: any, // 自定义渲染函数的配置项
 * }
 */
md.use(mdCustomPlugin, 'customCodeBlocks', '$', { render: customCodeBlockRender });