latex support

[Cyberfly100]

I tried to use latex in dash, but it is not working.
It seems that the mathjax javacript library is not loaded.

[chriddyp]

I wonder if the solution is just to add MathJax to https://github.com/plotly/dash-core-components/blob/d034e25f6f56423ef2de7e5905328396040cf4d8/dash_core_components/__init__.py#L25-L29

[jessexknight]

It is possible to render MathJax in static Dash content, but not in dynamic content.

Here is a MWE

import dash
import dash_html_components as html

app = dash.Dash(__name__)
mathjax = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML'
app.scripts.append_script({ 'external_url' : mathjax })

app.layout = html.Div(id='main',children=[
  html.Div(id='static',children='$$ x=1 $$'),
  html.Div(id='dynamic',children=''),
  html.Button('Add Math',id='button'),
])

@app.callback(
  dash.dependencies.Output('dynamic','children'),
 [dash.dependencies.Input('button','n_clicks')]
)
def addmath(n_clicks):
  if n_clicks:
    return '$$ x=1 $$'
  else:
    return None

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

related community.plot.ly thread

[aztan2]

Hi, I'm wondering if there has been progress on this issue? Specifically, I would like to be able to render latex in the axis titles/labels of a graph.

[jessexknight]

There is a pull request in progress to solve this issue, but it seems like it has stalled at the moment.

[xhluca]

I created dash-katex, a library that let you render latex inside a component DashKatex, obviously using katex js. This does not solve the problem of rendering latex inside a plotly graph object, but lets you dynamically run latex inside divs.

Link: https://github.com/xhlulu/dash-katex

[vdkotian]

Is this issue still available for development? I am seeking to contribute.

[renatobellotti]

Is there any progress on this? Latex support is quite important for scientific dashboards...

[renatobellotti]

What about now?

[yueyericardo]

After searching around, I found Latex to Image API very useful.
And I wrote a function to make it work with $a+b$ and $$a+b$$ for dcc.markdown.

import dash_core_components as dcc
import dash_html_components as html
import dash
import urllib.parse
import re


def convert(text):
    def toimage(x):
        if x[1] and x[-2] == r'$':
            x = x[2:-2]
            img = "\n<img src='https://math.now.sh?from={}' style='display: block; margin: 0.5em auto;'>\n"
            return img.format(urllib.parse.quote_plus(x))
        else:
            x = x[1:-1]
            return r'![](https://math.now.sh?from={})'.format(urllib.parse.quote_plus(x))
    return re.sub(r'\${2}([^$]+)\${2}|\$(.+?)\$', lambda x: toimage(x.group()), text)


app = dash.Dash()

Markdown_text = r"""
Let's see if it works:  
$$\hat P \psi_k(x) =p \psi_k(x)$$ 

$$-i\hbar \frac{\partial {c\ e^{ikx}}}{\partial x} =-i\hbar\ c\ ik\ e^{ikx} $$ 

$$\hbar k\ c\ e^{ikx} = \hbar k\ \psi_k(x) \tag{2}$$
with $p=\hbar k$
"""

Markdown_text = convert(Markdown_text)


app.layout = html.Div([
    dcc.Markdown(Markdown_text, dangerously_allow_html=True)
])

if __name__ == '__main__':
    app.run_server(host='0.0.0.0')