首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3支持chartjs、Echartjs、mermaid渲染

Vue3实现markdown-it支持chartjs、Echartjs、mermaid的渲染(附实例代码)

2025-08-13 08:58:10 作者：小牛变大niu

markdown-it-vue使用markdown-it作为Markdown数据解析引擎,整合多种markdown-it插件,并内置了一些自己的功能性插件,这篇文章主要介绍了Vue3实现markdown-it支持chartjs、Echartjs、mermaid渲染的相关资料,需要的朋友可以参考下

核心功能需求

通过markdown-it插件扩展语法解析Markdown代码块，支持动态渲染交互式图表和流程图。配置自定义渲染规则处理特殊代码类型，实现可视化内容嵌入。

<template>
  <div v-html="renderedContent"></div>
</template>

1.插件安装与配置

npm install markdown-it markdown-it-multimd-table markdown-it-anchor markdown-it-toc markdown-it-emoji markdown-it-footnote markdown-it-task-lists

2. 引入markdown-it插件

import MarkdownIt from 'markdown-it'
import markdownItTable from 'markdown-it-multimd-table'
import markdownItAnchor from 'markdown-it-multimd-table'
import markdownItToc from 'markdown-it-multimd-table'
import markdownItEmoji from 'markdown-it-multimd-table'
import markdownItFootnote from 'markdown-it-multimd-table'
import markdownItTaskLists from 'markdown-it-multimd-table'

3. 配置markdown渲染规则

const md = new MarkdownIt({
  html: true,
  xhtmlOut: true,
  linkify: true,
  breaks: true,
  typographer: true,
  quotes: ["\"", "\"", "'", "'"],
  langPrefix: 'language-',
  highlight: (code, lang) => {
    if (!lang) return `<pre><code>$[code]</code></pre>`

    const languageName = getCorrectLanguageName(lang)

    // 处理特殊语言
    if (lang === 'echarts') {
      return `<div class="code-block">
        ${renderECharts(code)}
      </div>`
    }

    if (lang === 'mermaid') {
      return `<div class="code-block">
        ${renderMermaid(code)}
      </div>`
    }

    // 处理普通代码
    if (hljs.getLanguage(lang)) {
      try {
        const highlightedCode = hljs.highlight(code, { language: lang }).value
        return `<div class="code-block">
          <pre><code class="hljs ${lang}">${highlightedCode}</code></pre>
        </div>`
      } catch (__) { }
    }

    return `<pre><code>$[code]</code></pre>`
  }
}).use(markdownItTable)
  .use(markdownItAnchor)
  .use(markdownItToc)
  .use(markdownItEmoji)
  .use(markdownItFootnote)
  .use(markdownItTaskLists)

除了配置 markdown 渲染规则外，您还可以通过 md.renderer.rules 自定义渲染规则。上述配置的作用是：在 markdown 渲染过程中，代码块会生成带有 language-代码类型名称 的标签，以此来确定适用的渲染规则。

4.配置语言名称映射

const languageNameMap = {
  sql: 'SQL',
  javascript: 'JavaScript',
  java: 'Java',
  typescript: 'TypeScript',
  vbscript: 'VBScript',
  css: 'CSS',
  html: 'HTML',
  xml: 'XML',
  php: 'PHP',
  python: 'Python',
  yaml: 'Yaml',
  mermaid: 'Mermaid',
  markdown: 'MarkDown',
  makefile: 'MakeFile',
  echarts: 'ECharts',
  shell: 'Shell',
  powershell: 'PowerShell',
  json: 'JSON',
  latex: 'Latex',
  svg: 'SVG',
  abc: 'ABC',
}
// 获取正确的语言名称
const getCorrectLanguageName = (language) => {
  if (!language) return 'Plain'
  return languageNameMap[language] || language.charAt(0).toUpperCase() + language.substring(1)
}

5.渲染 ECharts

const renderECharts = (code) => {
  console.log(code)
  try {
    const option = JSON.parse(code)
    const chartId = 'chart-' + Math.random().toString(36).substr(2, 9)
    const chartHtml = `<div id="${chartId}" class="echarts-container" style="width: 100%; height: 400px;"></div>`
    // 使用 nextTick 确保 DOM 已经渲染
    nextTick(() => {
      const chartDom = document.getElementById(chartId)
      if (chartDom) {
        const chart = echarts.init(chartDom)
        chart.setOption(option)

        // 响应式调整
        const resizeObserver = new ResizeObserver(() => {
          chart.resize()
        })
        resizeObserver.observe(chartDom)

        // 清理函数
        onUnmounted(() => {
          resizeObserver.disconnect()
          chart.dispose()
        })
      }
    })

    return chartHtml
  } catch (error) {

    return `<div class="error-message">ECharts渲染中</div>`
  }
}

6.渲染 Mermaid

const renderMermaid = async (code) => {
  try {
    const diagramId = 'mermaid-' + Math.random().toString(36).substr(2, 9)
    const diagramHtml = `<div class="mermaid" id="${diagramId}">$[code]</div>`

    // 使用 nextTick 确保 DOM 已经渲染
    nextTick(async () => {
      const diagramDom = document.getElementById(diagramId)
      if (diagramDom) {
        await mermaid.render(diagramId, code)
      }
    })

    return diagramHtml
  } catch (error) {
    // console.error('Mermaid rendering error:', error)
    return `<div class="error-message">Mermaid 图表渲染中</div>`
  }
}

总结

到此这篇关于Vue3实现markdown-it支持chartjs、Echartjs、mermaid渲染的文章就介绍到这了,更多相关Vue3支持chartjs、Echartjs、mermaid渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！