前提

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

以下两种版都需要在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. 【完结】【一本通提高】2025dsfzB哈希和哈希表做题笔记

    2025年dsfz - 上学期B层字符串哈希专题做题笔记 笔记部分请看我的字符串哈希学习笔记 题目编号 标题 估分 正确 提交 Y 2066 Problem  A [一本通提高篇哈希和哈希表]乌力波( ...

  2. Maven依赖冲突解决方案：调解规则与工具实践

    结论先行 Maven解决依赖冲突的核心机制是 依赖调解 和 显式排除 ,并通过插件(如maven-dependency-plugin.maven-enforcer-plugin和Maven Helpe ...

  3. HttpServletResponse相关

    目录 返回给客户端数据:字节流和字符流 解决返回字节流和字符流乱码问题 万能解决乱码 文件下载 tomcat提供的默认下载方式 手动编写的DownloadServlet 返回给客户端数据:字节流和字符 ...

  4. 【HUST】网安｜操作系统实验｜实验一 内核编译、系统调用、编写批处理脚本

    文章目录 目的 任务 前言 一.linux内核编译 非常靠谱的两篇参考文章: 补注: 总结 二.添加新的系统调用 特别靠谱的参考文章: 补注: 1. 我修改的文件: 2. 图中需要敲入的全部代码: 3 ...

  5. JavaScript编程的10+最佳实践解决方案

    @charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...

  6. 异步之舞：FastAPI与MongoDB的深度协奏

    title: 异步之舞:FastAPI与MongoDB的深度协奏 date: 2025/05/18 19:09:08 updated: 2025/05/18 19:09:08 author: cmdr ...

  7. C++ ADL 与 模板

    什么是ADL ADL(Argument Dependent Lookup),参数依赖查找,明确的意思是依赖参数的函数查找,即对于函数调用,不仅会依照常规的名称查找规则,还会在函数参数所在的命名空间内查 ...

  8. Spring Ai 从Demo到搭建套壳项目（一）初识与实现与deepseek对话模式

    前言 为什么说Java长青,主要是因为其生态圈完善,Spring又做了一款脚手架,把对接各个LLM厂商的sdk做了一遍,形成一系列的spring-ai-starter-** 的依赖. 目前为止版本去到 ...

  9. 【2020.11.30提高组模拟】柱形图(histogram) 题解翻译

    [2020.11.30提高组模拟]柱形图(histogram) 题解 题意简述 有\(n\)个长方体并排这样放着,每种颜色的长方体的宽度都为\(1\),高\(a_i\)长\(b_i\). 求在这些长方 ...

  10. 【2020.11.30提高组模拟】剪辣椒(chilli) 题解

    [2020.11.30提高组模拟]剪辣椒(chilli) 题解 题意简述 给你一棵树,删去两条边,使得形成的三棵新树的大小极差最小化.求最小极差. \(3\le n\le 200,000\). Sol ...