【页面渲染】无法正确渲染 Equation Block

[kchen0x]

描述bug 无法正确渲染 Equation Block

复现步骤 在Notion中使用 Equation Block，无法在NotionNext中正确渲染。

期望的正常结果

截图

环境

• 操作系统: macos
• 浏览器 edge
• 版本 all

补充说明

[kchen0x]

#302

[An-Jhon]

我也遇到了这个问题，我的解决方法是矩阵括号不要用 \left[ 和 \right] ，我换成\begin{bmatrix}...\end{bmatrix}之后就可以正常渲染了

[tangly1024]

经测试，似乎是由于 \tag{行标} 不受支持导致的渲染失败： f\left(\left[\frac{1+\{x, y\}}{\left(\frac{x}{y}+\frac{y}{x}\right)(u+1)}+a\right]^{3 / 2}\right) \tag{行标} 如果去掉 行标(\tag{x})，则可以正常显示 f\left(\left[\frac{1+\{x, y\}}{\left(\frac{x}{y}+\frac{y}{x}\right)(u+1)}+a\right]^{3 / 2}\right)

源notion页面 https://www.notion.so/tanghh/a6271da06b8f47a39735e8fa770f1d9f#7de9f2bb6e8b4a0db12662148de95bd5

效果页面 https://preview.tangly1024.com/article/example-1#7de9f2bb6e8b4a0db12662148de95bd5

要修复这个bug似乎比较棘手

[zfhxi]

经测试，似乎是由于 \tag{行标} 不受支持导致的渲染失败： f\left(\left[\frac{1+\{x, y\}}{\left(\frac{x}{y}+\frac{y}{x}\right)(u+1)}+a\right]^{3 / 2}\right) \tag{行标} 如果去掉 行标(\tag{x})，则可以正常显示 f\left(\left[\frac{1+\{x, y\}}{\left(\frac{x}{y}+\frac{y}{x}\right)(u+1)}+a\right]^{3 / 2}\right)

源notion页面 https://www.notion.so/tanghh/a6271da06b8f47a39735e8fa770f1d9f#7de9f2bb6e8b4a0db12662148de95bd5

效果页面 https://preview.tangly1024.com/article/example-1#7de9f2bb6e8b4a0db12662148de95bd5

要修复这个bug似乎比较棘手

我发现将react-notion-x降级为4.11.0可以解决，最新版为啥不行的原因暂不知道:joy:

[tangly1024]

我发现将react-notion-x降级为4.11.0可以解决，最新版为啥不行的原因暂不知道😂

感谢您的反馈，根据这个思路我进行了调试：

这个错误是由Katex 直接导致的错误： 错误原因是 : ParseError: KaTeX parse error: \tag works only in display equations

推测原因

版本不同导致

• katex 目前最新版本的katex是0.16.4
• 而 react-notion-x 使用的是 matejmazur/react-katex组件 这是一个3年前的项目，其Katex内核为 ^0.15.x 对应版本0.15.6。

最后解决

关键就在这行代码：

ParseError: KaTeX parse error: \tag works only in display equations

剖析了 react-notion-x 、 matejmazur/react-katex 、 katex 的源码后发现：错误原因是 displayMode 参数设置的问题； 将 displayMode 强行设置为true时即可展示 {tag}标签

KaTeX.renderToString(content, {
    displayMode: !!block,
    ...settings
  })

为此我重新手撸了一个katex-react组件，并嵌入到react-notion-x中，解决了此bug；

[tangly1024]

更新至3.6.4 版本即可解决此问题。

更新后的效果预览： https://preview.tangly1024.com/article/example-1#7de9f2bb6e8b4a0db12662148de95bd5

对应notion页面 https://tanghh.notion.site/1-a6271da06b8f47a39735e8fa770f1d9f

[zfhxi]

大佬，我也最近在研究如何解决这个问题。没学过nodejs，捣鼓了好久，从https://github.com/NotionX/react-notion-x/issues/301才研究出解决方案https://github.com/zfhxi/NotionNext/commit/99c6173a9262c8544bdd5fd01f3708817e5de3ab，但还是没大佬的优雅:joy: