前提

两者都很强大，但是两者结合，存在问题，目前网上无解。

以下两种版都需要在index.html 即入口页面添加一个元素

<body>

   <div id="root"></div>

   <div hidden id="mermaidSvg"></div>

</body>

解决办法1

写一个拦截器即可

const renderer = {

  count: 0,

  code(code, type, escaped) {

    if (type === 'mermaid') {

      renderer.count++

      mermaid.render('mermaidSvg', code, ((svgCode) => {

        const svg = document.createElement('SVG');

        svg.innerHTML = svgCode;

        setTimeout(() => {

          document.querySelector(`#mermaid-${renderer.count}`).innerHTML = '';

          document.querySelector(`#mermaid-${renderer.count}`).appendChild(svg)

        })

      }))

      return `<div class="language-mermaid" id='mermaid-${renderer.count}'>${code}</div>`;

    }

    return `<pre><code class="language-${type}" data-name="21">${code}</code></pre>`;

  }

};

marked.use({ renderer });

解决办法2

如果你用到了代码高亮插件highlight，那么方式1就不可行了，会冲突，那么直接请在highlight的配置里改造就行

marked.setOptions({

    count: 0,

    renderer: new marked.Renderer(),

    highlight(code, type) {

      if (type === 'mermaid') {

        this.count++

        mermaid.render('mermaidSvg', code, ((svgCode) => {

          const svg = document.createElement('SVG');

          svg.innerHTML = svgCode;

          setTimeout(() => {

            document.querySelector(`#mermaid-${this.count}`).innerHTML = '';

            document.querySelector(`#mermaid-${this.count}`).appendChild(svg)

          })

        }))

        return `<div class="language-mermaid" id='mermaid-${this.count}'>${code}</div>`;

      }

      return hljs.highlightAuto(code).value;

    }

  });

效果

mermaid与marked结合使用的更多相关文章

  1. mysq l错误Table ‘./mysql/proc’ is marked as crashed and should be repaired

    续上一篇,解决了上一篇中的问题后,启动成功,但是在数据库中操作会存在一些问题,一些操作报一下异常: Table './mysql/proc' is marked as crashed and shou ...

  2. marked.js简易手册

    marked.js简易手册 本文介绍的是marked.js.秉持"来之即用"的原则,对它进行简要的翻译和归纳, 安装 在网上引用或者是引用本地文件即可.要么就用命令行: npm i ...

  3. 解决mysql Table ‘xxx’ is marked as crashed and should be repaired的问题。

    解决mysql Table 'xxx' is marked as crashed and should be repaired的问题. 某个表在进行数据插入和更新时突然出现Table 'xxx' is ...

  4. 简单的Markdown功能实现——marked模块的使用

    marked是一个markdown 解析.编译器,通过引入marked模块,可以实现一个简单的markdown编辑器.使用方式如下: Install 新建一个项目文件夹,在项目中下载marked模块 ...

  5. MySQL Table is marked as crashed 解决方法

    MYSQL数据表出现问题,提示: ERROR 144 (HY000): Table './dpt/dpt_production' is marked as crashed and last (auto ...

  6. Type 'Insus.NET.PictureObject' in Assembly 'App_Code, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null' is not marked as serializable.

    昨晚想实现一个功能,需要把一个对象存储于ViewState中去,但在运行时,出现下面的异常. Type 'Insus.NET.PictureObject' in Assembly 'App_Code, ...

  7. 解决"is marked as crashed and should be repaired"方法

    初次遇到这个问题是在服务器上放置mysql的磁盘空间满了(数据库目录和网站目录一定要做一定的分离,不要放在一个磁盘空间了) 当请求写入数据库时,php会提示 **** is marked as cra ...

  8. “Transaction rolled back because it has been marked as rollback-only”

    spring的声明事务提供了强大功能,让我们把业务关注和非业务关注的东西又分离开了.好东西的使用,总是需要有代价的.使用声明事务的时候,一 个不小心经常会碰到“Transaction rolled b ...

  9. ora-00031:session marked for kill处理oracle中杀不掉的锁

    http://www.cnblogs.com/songdavid/articles/2223869.html 一些ORACLE中的进程被杀掉后,状态被置为"killed",但是锁定 ...

  10. 【转】ora-00031:session marked for kill处理oracle中杀不掉的锁

    一些ORACLE中的进程被杀掉后,状态被置为"killed",但是锁定的资源很长时间不释放,有时实在没办法,只好重启数据库.现在提供一种方法解决这种问题,那就是在ORACLE中杀不 ...

随机推荐

  1. 用 .NET NativeAOT 构建完全 distroless 的静态链接应用

    前言 .NET NativeAOT 想必不少开发者都已经很熟悉了,它可以将 .NET 程序集直接编译到原生的机器代码,从而可以脱离 VM 直接运行.简单的一句 dotnet publish -c Re ...

  2. [设计模式/Java] 设计模式之门面模式(外观模式)【20】

    概述 : 门面模式 := 外观模式 := Facade Pattern 产生背景 软件开发过程中,我们经常会遇到复杂系统,其中包含多个子系统和接口.在这种情况下,为了简化客户端的调用过程,提高代码的可 ...

  3. 关于Cesium渲染PrimitiveCollection和图层的树状管理的问题

    原文:关于Cesium渲染PrimitiveCollection和图层的树状管理的问题 - 搜栈网 (seekstack.cn)

  4. php-ffmpeg保存为.mp4格式时报错

     原文: php-ffmpeg保存为.mp4格式时报错:FFMpeg\Exception\RuntimeException: Encoding failed in - 搜栈网 (seekstack.c ...

  5. RK356X网口限速

    1. 参考资料 Linux 上的虚拟网络接口,主要要了解一下 IFB,对输入的流量进行整形 https://lyyao09.github.io/2020/06/13/linux/An-introduc ...

  6. GC垃圾收集时，居然还有用户线程在奔跑

    之前面试被问到过"当GC垃圾收集时,是所有的用户线程都停止了吗?",这一篇我们来探究一下这个问题. 其实执行本地代码的线程仍然可以运行,那么这些线程一旦改变了对象中的引用关系或创建 ...

  7. WO Mic - 免费麦克风

    WO Mic可以将您的手机变成电脑麦克风.您无需支付一分钱购买任何设备.如果您选择无线传输,它也是便携的.数百万用户已经安装并每天都在使用它进行通话.录音.语音遥控等活动. 三大组件协同工作以实现这一 ...

  8. 【工具】秘塔AI搜索｜推荐一个现在还免费的AI聚合搜索工具

    网址:https://metaso.cn/ 使用时间:2024/03/27 . 2024/04/10 以前其实用过它家的秘塔写作猫,当时感觉非常不错. 这次看到它出AI搜索,感觉开发者挺有野心和实力的 ...

  9. MCP 实践系列：EdgeOne 在线部署HTML页面

    今天,我们将专门讲解一下 EdgeOne 在线部署 HTML 页面时所提供的 MCP 功能.这个功能对于个人用户来说非常实用,尤其适合一些小型应用场景,比如开发一个简单的小游戏,或者搭建一个小型网站, ...

  10. Helm课程资料

      第一章.helm介绍.组件.安装和目录结构 1.helm3课程简介 helm3课程简介第一章.helm介绍.组件.安装和目录结构第二章.编写一个chart和helm内置对象详解第三章.helm3常 ...