快捷導(dǎo)航

Vue3實(shí)現(xiàn)markdown-it支持chartjs、Echartjs、mermaid的渲染(附實(shí)例代碼)

更新時(shí)間：2025年08月13日 08:58:22 作者：小牛變大niu

markdown-it-vue使用markdown-it作為Markdown數(shù)據(jù)解析引擎,整合多種markdown-it插件,并內(nèi)置了一些自己的功能性插件,這篇文章主要介紹了Vue3實(shí)現(xiàn)markdown-it支持chartjs、Echartjs、mermaid渲染的相關(guān)資料,需要的朋友可以參考下

核心功能需求

通過markdown-it插件擴(kuò)展語法解析Markdown代碼塊，支持動(dòng)態(tài)渲染交互式圖表和流程圖。配置自定義渲染規(guī)則處理特殊代碼類型，實(shí)現(xiàn)可視化內(nèi)容嵌入。

<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渲染規(guī)則

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 渲染規(guī)則外，您還可以通過 md.renderer.rules 自定義渲染規(guī)則。上述配置的作用是：在 markdown 渲染過程中，代碼塊會(huì)生成帶有 language-代碼類型名稱 的標(biāo)簽，以此來確定適用的渲染規(guī)則。

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 已經(jīng)渲染
    nextTick(() => {
      const chartDom = document.getElementById(chartId)
      if (chartDom) {
        const chart = echarts.init(chartDom)
        chart.setOption(option)

        // 響應(yīng)式調(diào)整
        const resizeObserver = new ResizeObserver(() => {
          chart.resize()
        })
        resizeObserver.observe(chartDom)

        // 清理函數(shù)
        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 已經(jīng)渲染
    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>`
  }
}

總結(jié)

到此這篇關(guān)于Vue3實(shí)現(xiàn)markdown-it支持chartjs、Echartjs、mermaid渲染的文章就介紹到這了,更多相關(guān)Vue3支持chartjs、Echartjs、mermaid渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: