在 VSCode 交互窗口中的 Plotly 图中渲染 Latex 符号

Question

我正在尝试在 Plotly 图的标题和标签中获取乳胶符号。我正在使用 VSCode，并在交互式窗口中运行代码。从我在其他帖子中看到的来看，Latex 在 Jupyter Notebook 中的使用看起来非常简单，但我无法让它在这个环境中工作。

我的环境：

蟒蛇3.10.4

情节5.9.0

vscode 1.62.3

我尝试过的：

• 使用 r"$$" 格式，
• 更改字体系列
• 更改plotly.io.renderers.default
• 在我的 conda 环境中安装 mathjax 并尝试适应plotly.offline模式（参见https://github.com/plotly/plotly.py/issues/515）

这个基本代码片段应该可以根据我见过的大多数帖子工作，但不会在交互窗口中进行 Latex 渲染。它取自https://plotly.com/python/LaTeX/，一切看起来都很简单。这就是为什么我猜测这个问题与 VSCode 有关。

import plotly.graph_objs as go

fig = go.Figure()
fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4],
    y=[1, 4, 9, 16],
    name=r'$\alpha_{1c} = 352 \pm 11 \text{ km s}^{-1}$'
))
fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4],
    y=[0.5, 2, 4.5, 8],
    name=r'$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$'
))
fig.update_layout(
    xaxis_title=r'$\sqrt{(n_\text{c}(t|{T_\text{early}}))}$',
    yaxis_title=r'$d, r \text{ (solar radius)}$'
)
fig.show()

我拥有的

我应该拥有什么

Answer 1

这是 VSCode 中 Jupyter 笔记本中 Plotly 的一个已知问题（例如问题#7801和 # 8131）。

Tomas Mazak在 #8131 中分享了一个解决方法：

import plotly
import plotly.graph_objs as go
from IPython.display import display, HTML

## Tomas Mazak's workaround
plotly.offline.init_notebook_mode()
display(HTML(
    '<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG"></script>'
))
##

fig = go.Figure()
fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4],
    y=[1, 4, 9, 16],
    name=r'$\alpha_{1c} = 352 \pm 11 \text{ km s}^{-1}$'
))
fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4],
    y=[0.5, 2, 4.5, 8],
    name=r'$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$'
))
fig.update_layout(
    xaxis_title=r'$\sqrt{(n_\text{c}(t|{T_\text{early}}))}$',
    yaxis_title=r'$d, r \text{ (solar radius)}$'
)
fig.show()

输出：