Marimo项目中Plotly与MathJax交互导致的单元格内容损坏问题分析

在Python交互式笔记本工具Marimo的最新版本中，用户报告了一个涉及Plotly可视化库的特殊bug。该问题表现为：当在Marimo笔记本中同时使用plotly.graph_objects和特定格式的注释时，会导致单元格代码被意外修改，出现字符损坏现象。

问题现象

用户提供的示例代码展示了典型的问题场景。初始代码如下：

import plotly.graph_objects as go

# mo.md(f"```\n{foo=!r}\n{bar=!r}\n```"),
go.Figure()

在执行后，代码会被错误地修改为：

import plotly.graph_objects as go

# mo.md(f"n{f∞=!r}n{ˉ=!r}n\n{foo=!r}\n{bar=!r}\n"),
go.Figure()

根本原因

经过开发团队深入分析，发现问题根源在于Plotly库与MathJax的交互机制。Plotly在渲染图表时，会动态加载MathJax库（版本2.x）用于处理数学公式和LaTeX标题。这个加载过程通过CDN引入以下脚本：

mathjax@2/MathJax.js?config=TeX-MML-AM_CHTML

MathJax作为数学排版引擎，会扫描页面内容寻找数学表达式。在Marimo的上下文中，它错误地将代码注释中的特定字符序列识别为数学表达式，导致对这些内容进行了不合预期的处理，最终表现为字符损坏。

技术细节

1. 渲染流程冲突：Marimo的HTML渲染组件(RenderHTML.tsx)在解析包含Plotly输出的内容时，触发了MathJax的处理流程
2. 时序问题：问题在单元格初次渲染时并不出现，而是在执行后或自动运行(auto-run)时显现
3. 内容稳定性：有趣的是，用户可以通过撤销(Ctrl-Z)操作恢复原始代码内容

关联问题

该问题还引发了另一个相关现象：当单元格输出包含特定字符模式时，MathJax会错误地将其识别为数学表达式进行处理。例如：

print("`\n{foo=!r}\n{bar=!r}\n`")

这样的输出也会被MathJax错误解析，导致显示异常。

解决方案

开发团队已经定位到以下解决方向：

1. 选择性忽略：为MathJax脚本添加特定的class名称，使其忽略对代码区域的解析
2. 版本隔离：考虑使用更新的MathJax 3.x版本，其具有更精确的内容识别能力
3. 渲染保护：在输出渲染层添加保护机制，防止数学引擎处理代码内容

用户建议

对于遇到此问题的用户，可以采取以下临时解决方案：

1. 暂时禁用自动运行(auto-run)功能
2. 避免在Plotly单元格中使用特定模式的注释
3. 等待下一个包含修复的版本发布

这个问题预计将在Marimo的下一个版本中得到彻底解决，届时将同时修复主问题和相关的输出渲染问题。该案例也提醒我们，在构建交互式笔记本环境时，需要特别注意不同库之间的DOM操作可能产生的冲突。