場景描述

我們公司有需要 將 md 渲染 呈現到網頁上的需求，內部使用了 editor.md來完成該功能。
但在使用的過程中 碰到了如下問題

1. 部分特定的 latex 公式解析不正確
   如下 latex部分

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

這種情況下 editor.md 的解析會直接報錯，原因是在 之前調用 marked（） 進行 markdown 解析的時候, 將 _ 轉義成了<em>
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)，輸出日志得到 如下
  • <p> <span class="editormd-tex"> NV<em>{n} = NV</em>{0} \times P<em>{0} \times P</em>{1} \times P<em>{2} \times \dots \times P</em>{n} </span> </p>
  • 閱讀源代碼發現 解析的 tex 是由上游的 marked 解析得到的，再次斷點，得到如下日志
  • <p> <span class="editormd-tex"> NV<em>{n} = NV</em>{0} \times P<em>{0} \times P</em>{1} \times P<em>{2} \times \dots \times P</em>{n} </span> </p>
  • 發現從源頭就出現了錯誤的解析，查看 marked 版本號，發現是 0.3.x ，故嘗試升級 marked
  • marked 升級到最新后，發現 如下問題
    • api 不兼容，最新的 marked 與 老版本 marked 存在大量 api 兼容性問題
    • 嘗試新建工程，只用 marked 解析，驗證是否 可以得到正確的 解析結果
      • 驗證過程中，關于 _ 的驗證得到了預期的結果，但形如 ABC**How To Use：**The Demo 這樣的文本 出現了不一致的解析
  • marked 升級無法解決該問題，轉變方向

解決方案

1. 不使用$$進行行內公式渲染，使用 latex 代碼塊進行公式的書寫，

• 優點：簡單，無需改動代碼
• 缺點: 復雜公式無法內嵌在行內。影響排版

2. 基于 marked 二次開發 markdown 編輯器，并結合社區 marked-katex 來完成公式的渲染（我們選擇的方案）

• 優點：方便升級，可以基于 marked 提供的擴展接口進行升級
• 缺點：需要理解 marked 相關 api。