editormd解析公式遇到的问题

场景描述

我们公司有需要将 md 渲染呈现到网页上的需求，内部使用了 editor.md来完成该功能。
但在使用的过程中碰到了如下问题

部分特定的 latex 公式解析不正确
如下 latex部分

$$
NV_{n} = NV_{0} \times P_{0} \times P_{1} \times P_{2} \times \dots \times P_{n}
$$

这种情况下 editor.md 的解析会直接报错，原因是在之前调用 marked（） 进行 markdown 解析的时候, 将 _ 转义成了
2. 不同方式初始化 editor.md 会导致不同的 latex 渲染效果

//方式一
editormd.markdownToHTML("test-editormd-view", {
  //markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
  //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启

  //toc             : false,
  //tocm            : true,    // Using [TOCM]
  tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
  //gfm             : false,
  //tocDropdown     : true,
  // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
  emoji           : true,
  taskList        : true,
  tex             : true,  // 默认不解析
  flowChart       : true,  // 默认不解析
  sequenceDiagram : true,  // 默认不解析
});


//方式二
editormd("test-editormd-view2", {
                    htmlDecode      : "style,script,iframe",  // you can filter tags decode
                    readOnly        : true,
                    styleActiveLine : false,   // disable active line
                    tex             : true,  // 默认不解析
                    path : '../lib/',
                });

造成此原因的情况是源代码中这两种方式会调用不同的 katex 处理细节

editormd.$katex.render(tex.text(), tex[0]); // 1503  当你使用editormd的时候被调用

katex.render(tex.html().replace(/&lt;/g, "<").replace(/&gt;/g, ">"), tex[0]);     //4018 当你使用editormd.markdownToHTML的时候被调用

解决过程

针对情况二
- 我们尝试了将两端的代码统一为 tex.text() 调用
针对情况一
- 我们首先将有问题的 latex 公式复制至最新的 katex 在线解析器中，用于排除 katex 类库无法解析的问题。
- 公式在 katex 中可以被解析，故尝试升级 katex 版本号，升至最新再次预览。
- 依然不行，在调用 katex 渲染处打断点 (editormd.js#4017)，输出日志得到如下
-  NV{n} = NV{0} \times P{0} \times P{1} \times P{2} \times \dots \times P{n} 
- 阅读源代码发现解析的 tex 是由上游的 marked 解析得到的，再次断点，得到如下日志
-  NV{n} = NV{0} \times P{0} \times P{1} \times P{2} \times \dots \times P{n} 
- 发现从源头就出现了错误的解析，查看 marked 版本号，发现是 0.3.x ，故尝试升级 marked
- marked 升级到最新后，发现如下问题
 - api 不兼容，最新的 marked 与老版本 marked 存在大量 api 兼容性问题
 - 尝试新建工程，只用 marked 解析，验证是否可以得到正确的解析结果
 - 验证过程中，关于 _ 的验证得到了预期的结果，但形如 ABC**How To Use：**The Demo 这样的文本出现了不一致的解析
- marked 升级无法解决该问题，转变方向

解决方案

不使用$$进行行内公式渲染，使用 latex 代码块进行公式的书写，

优点：简单，无需改动代码
缺点: 复杂公式无法内嵌在行内。影响排版

基于 marked 二次开发 markdown 编辑器，并结合社区 marked-katex 来完成公式的渲染（我们选择的方案）

优点：方便升级，可以基于 marked 提供的扩展接口进行升级
缺点：需要理解 marked 相关 api。

posted @ 2024-07-25 19:03 jnzhcn 阅读(42) 评论(0) 编辑收藏举报

刷新页面返回顶部

Loading

jnzhsh

editormd解析公式遇到的问题

场景描述

解决过程

解决方案

公告