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

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

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

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'

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)

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)
}

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>`
  }
}

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>`
  }
}