前提

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

以下两种版都需要在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. JMeter提取多个变量值总结

  2. mybatis底层源码

    一.运行原理 二.配置文件的解析以及创建SqlSessionFactory 首先通过配置文件的文件流创建SqlSessionFactoryBuilder对象 调用build方法,传入文件流 之后通过解 ...

  3. java基础之File、流

    一.File类 我们可以使用File类的方法 创建一个文件/文件夹 删除文件/文件夹 获取文件/文件夹 判断文件/文件夹是否存在 对文件夹进行遍历 获取文件的大小 构造方法: 1.public Fil ...

  4. eolinker响应预处理：传参解决方法（截取返回数据中的某一段数据，正则截取）

    特别注意:需要使用全局变量或者预处理前务必阅读本链接https://www.cnblogs.com/becks/p/13713278.html 场景描述: 登录用例A,参加活动用例B,用户参加活动需要 ...

  5. 电商商品推荐系统实战：基于TensorFlow Recommenders构建智能推荐引擎

    引言:推荐系统的商业价值与实现挑战 在电商领域,推荐系统承担着提升用户转化率和平台GMV的核心使命.根据麦肯锡研究,亚马逊35%的销售额来自推荐系统,Netflix用户75%的观看行为由推荐驱动.传统 ...

  6. Git错误，fatal: refusing to merge unrelated histories

    错误:fatal: refusing to merge unrelated histories 中文意思就是拒绝合并不相关的历史, 解决 出现这个问题的最主要原因还是在于本地仓库和远程仓库实际上是独立 ...

  7. Python3 queue

    1.创建一个容器 2.把1-10放入容器 3.输出的时候先判断容器是否为空 4.依次从容器中取出 用法: Queue.qsize() 返回队列的大小 Queue.empty() 如果队列为空,返回Tr ...

  8. SpringMVC的注解

    @RequestMapping 指定请求的路径 value :用于指定请求的url.它和path属性的作用是一样的. path :路径 method :请求的方法.RequestMethod.GET, ...

  9. Windows tomcat简单使用

    目录 1 常见服务器 2 Tomcat下载安装 3 配置环境 3.1 jdk环境 3.2 tomcat环境 4 启动/关闭 tomcat 5 访问tomcat 6 修改tomcat端口 7 部署项目 ...

  10. 代码随想录第十天 | Leecode 232. 用栈实现队列、Leecode 225. 用队列实现栈、 Leecode 20. 有效的括号、Leecode 1047. 删除字符串中的所有相邻重复项

    Leecode 232. 用栈实现队列 题目链接:https://leetcode.cn/problems/implement-queue-using-stacks/submissions/ 题目描述 ...