Dash中dcc.Figure与dcc.Markdown的MathJax LaTeX渲染兼容问题求助

问题背景 #

开发科学仪表板时，需同时在dcc.Markdown和dcc.Figure中渲染LaTeX，但遇到版本兼容矛盾：

• dcc.Markdown仅支持MathJax v3.2，无法适配v2
• dcc.Figure（Plotly图表）仅支持MathJax v2，无法适配v3.2
  已尝试升级Plotly（5.11.0→5.13.1）和Dash（2.7.0→2.9.0），问题仍存在；且Plotly官方文档宣称v5.8.0+完善支持MathJax v3，但实际未生效。

对提问的解答 #

1. 是否存在同时支持的CDN链接？ #

单独一个CDN链接无法同时满足两个组件需求，但可以同时加载MathJax v2和v3，通过命名空间隔离避免全局冲突，实现两者同时正常渲染LaTeX。

2. 问题是否与CDN中的es5或AM_CHTML参数有关？ #

是，两者参数直接影响兼容性：

• es5：MathJax v3的es5后缀表示该版本是编译为ES5语法的包，用于兼容旧版浏览器；若用户环境均为现代浏览器，也可使用不带es5的版本（如tex-mml-chtml.js），不影响核心渲染功能。
• AM_CHTML：这是MathJax v2的配置参数，指定加载TeX、MathML和CHTML渲染器；MathJax v3的配置格式已变更，直接使用tex-mml-chtml.js就包含对应渲染逻辑，无需额外config参数。

实现代码示例 #

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd

# 加载MathJax v2并延迟启动，待自定义配置完成后初始化
MATHJAX_V2_CDN = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML&delayStartupUntil=configured"
# 加载MathJax v3作为全局实例供dcc.Markdown使用
MATHJAX_V3_CDN = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.js"

app = Dash(__name__, external_scripts=[MATHJAX_V2_CDN, MATHJAX_V3_CDN])

# 自定义index页面，隔离MathJax v2和v3的命名空间
app.index_string = '''
<!DOCTYPE html>
<html>
    <head>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
        <script type="text/x-mathjax-config">
            // 将v2实例保存到自定义命名空间，释放全局变量给v3
            window.PlotlyMathJax = MathJax;
            MathJax = null;
            // 配置v2的渲染规则
            window.PlotlyMathJax.Hub.Config({
                tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
            });
            window.PlotlyMathJax.Hub.Startup.onload();
        </script>
    </head>
    <body>
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>
    </body>
</html>
'''

# 测试用图表和Markdown内容
df = pd.DataFrame({'x': [1, 2, 3], 'y': [4, 5, 6]})
fig = px.scatter(df, x='x', y='y', title=r'Plotly图表中的LaTeX: $E=mc^2$')
fig.update_layout(mathjax=True) # 启用Plotly的MathJax支持

app.layout = html.Div([
    html.H1("LaTeX双组件渲染测试"),
    dcc.Markdown(r'''
    ### Markdown中的LaTeX示例
    行内公式：$E=mc^2$
    块级公式：
    $$
    \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
    $$
    ''', mathjax=True),
    dcc.Graph(figure=fig)
])

if __name__ == '__main__':
    app.run_server(debug=True)

原理说明 #

• 通过window.PlotlyMathJax = MathJax将MathJax v2实例保存到自定义命名空间，释放全局MathJax变量给v3，避免版本冲突。
• Plotly图表会调用自定义的PlotlyMathJax实例（v2）渲染LaTeX，而dcc.Markdown则使用全局的MathJax v3实例，实现两者同时正常工作。

内容的提问来源于stack exchange，提问作者aarohan