希望增加对数学公式开始和结束标签的配置

[hooozen]

我看到现在对 katex 的解析是写死使用 $...$ 作为行内公式, $$ ... $$ 作为块级公式. 但有时候服务返回的内容采用了 MathJax \( ... \) 和 \[ ... \] 的默认标签. 现在需要手动去正则替换一下这些符号才能在 md-editor-v3 中正常渲染. 如果能增加这些标签的配置就更好了! ❤️

[imzbf]

我尝试了一下，目前想兼容对称和非对称的标识很麻烦，所以正对你的情况建议替换内部的公式扩展，像下面这样：

npm i markdown-it-math

import { config } from 'md-editor-v3';
import mathPlugin from 'markdown-it-math/dist/markdown-it-math.js';

config({
  markdownItPlugins(plugins) {
    return plugins
      .map((item) => {
        if (item.type === 'katex') {
          return {
            ...item,
            plugin: mathPlugin,
            options: {
              // ...item.options,
              inlineOpen: '\\(',
              inlineClose: '\\)',
              blockOpen: '\\[',
              blockClose: '\\]',
              inlineRenderer: (str: string) => {
                if (item.options.katexRef.value) {
                  const html = item.options.katexRef.value.renderToString(str, {
                    throwOnError: false
                  });

                  return `<span class="md-editor-katex-inline" data-processed>${html}</span>`;
                } else {
                  return `<span class="md-editor-katex-inline">${str}</span>`;
                }
              },
              blockRenderer: (str: string, token: Token) => {
                const lineNum: number = token.map![0];
                if (item.options.katexRef.value) {
                  const html = item.options.katexRef.value.renderToString(str, {
                    throwOnError: false,
                    displayMode: true
                  });

                  return `<p class="md-editor-katex-block" data-line=${lineNum} data-processed>${html}</p>`;
                } else {
                  return `<p class="md-editor-katex-block" data-line=${lineNum}>${str}</p>`;
                }
              }
            }
          };
        }

        return item;
      });
  }
});

[hooozen]

谢谢. 但是由于服务端返回文本内容可能采用多种风格的公式标签. 所以我暂时使用正则替换的方式, 目前还没有发现问题.

[hooozen]

使用正则替换的话我们发现对于一些代码块的处理比较麻烦. 现在还没找到合适的解决办法. 但对于 md-editor-v3 还是有一些建议.

首先, $ 的分隔符可能使用起来并不如 \( 和 \) 方便. 因为可能在文本中使用 $ 作为美元符号使用. 例如以下文本会被解析为公式.

这个 4$, 那个 5$.
It's $4, but I paid $5.

另外, 当使用 no-katex 关闭 katex 后, 虽然文本不会被渲染成数学表达式, 但却添加了 div 包裹和类样式. 这样影响外部的 math 库识别和生效.

[imzbf]

目前来讲，不会舍弃$标识，因为是采用大多数在用的标准，后面我找时间研究意义上面的方式能不能让这两个标识共存

[hooozen]

另外还发现一个问题, 就是在我停用 no-katex 后, 像 \[ 字符串解析后的 \ 会消失. 例如:

椭圆的方程一般写为：\n   \\[ \\frac{(x - h)^2}{a^2} + \\frac{(y - k)^2}{b^2} = 1 \\]\n 

解析后成为:

字符串中的 \ 已经被转义了, 但解析后却丢失了.

辛苦查看一下什么原因❤️

[imzbf]

window.ddd = () => {
  const a = `椭圆的方程一般写为：\n   \\[ \\frac{(x - h)^2}{a^2} + \\frac{(y - k)^2}{b^2} = 1 \\]\n `;
  console.log(a);
};

ddd();
// 椭圆的方程一般写为：
//   \[ \frac{(x - h)^2}{a^2} + \frac{(y - k)^2}{b^2} = 1 \]

这是转义的问题，如果要保留真实的\\[，它应该是\\\\[