Mermaid markdown + vue预览

最新推荐文章于 2025-01-07 21:54:27 发布

QS8945

最新推荐文章于 2025-01-07 21:54:27 发布

阅读量725

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/QS8945/article/details/122623390

版权

1.安装mermaid

yarn add mermaid

2.按需引入

import Mermaid from 'mermaid'

3.渲染

initMermaid() {
      let mermaidNodes = document.getElementsByClassName('mermaid')
      for (
        let i = 0, mermaidNodesLen = mermaidNodes.length;
        i < mermaidNodesLen;
        i++
      ) {
        this.initMermaidItem(mermaidNodes[i], mermaidNodes[i].textContent, i)
      }
    },
    initMermaidItem(node, html, i) {
      var insertSvg = function (svgCode, bindFunctions) {
        node.innerHTML = svgCode
      }
      var graph = Mermaid.mermaidAPI.render('mermaid' + i, html, insertSvg)
    },
    getMarkDown(res) {
        this.htmlUrl = res.data
        this.$nextTick(() => {
          this.initMermaid()
        })
    },