Fun workaround for displaying Latex in Streamlit!

Using Streamlit
1

Installing this Chrome plugin let’s you render Latex (using MathJax) on any website you choose. Then you can add things like this:

import streamlit as st

st.title('Latex is amazing')
r'''
$$x^2 = \frac{n^2+n}{10}$$
'''

And get something that looks like:

23%20PM
Screen Shot 2019-10-06 at 7.23.23 PM.png1690×338 7.58 KB

Few caveats:

  1. When you change the formula it won’t refresh without a manual page refresh.
  2. I can’t vouch for this Chrome extension, so I highly recommend limiting the webpages this plugin has access to. You can do this by going to the “Details” page for the Chrome extension and restricting site access to http://127.0.0.1:8501 or whatever the url is for where you are hosting Streamlit. If you are hosting it locally, then you must use 127.0.0.1 rather than localhost. Chrome doesn’t allow you to restrict access to http://localhost:8501. By default, running Streamlit opens a browser tab to localhost so you’ll have to manually navigate to 127.0.0.1:8501
  3. The rendered formulas will only display for people with this Chrome extension installed.

I think that support for Latex via MathJax really ought to be built into Streamlit. It’s super helpful!

1 Like
2

That’s an awesome workaround @veered. Welcome to the community :hugs: and I look forward to hearing many more cool ideas!

I’ve filed a feature request based on your awesome suggestion.

Please feel free to submit your own feature requests in the future! :slight_smile:

3

Thanks!

I started playing around with Streamlit last night and I’m super impressed. The live code reloading is extremely well done and seems like some crazy black magic. And having free-floating strings get written to Streamlit is a really nice touch. It materially improves the readability of the code.

I’ve started working on a project in Streamlit that might end up needing to do some weird things, so I’m sure I’ll have more ideas :slight_smile:

1 Like
4

Hey. It turns out that matplotlib can display LaTeX.

I used this fact to create a little gist that demonstrates rendering LaTeX formulae as images in Streamlit.

66330192-6b010e00-e91f-11e9-9547-1ea4488ccff1.jpg1224×1034 104 KB

Enjoy! :slight_smile:

5

Update: As of v0.50.2, Streamlit supports Latex natively! :partying_face:

3 Likes
6

Hello,

This snippet shows latex on local host but doesn’t show anything on share.streamlit.io

If I wrap it wit st.latex(’’’ …""") everything is shown in red.

How comes?

st.subheader("Formula for specific humidity")
    r'''$$es = 6.112 * e^{\frac{17.67 * t}{t + 243.5}} (e = 2,71828..)\\$$
	$$e = es * \frac{rh}{100}\\$$
	$$q = {\frac{0.622 * e}{p - (0.378 * e)}}*1000$$'''
7

The following does not render properly with st.latex (even though it works on Katex). See a working example here: KaTeX – The fastest math typesetting library for the web.

st.latex(r'''
\begin{align}
    v_{avg} &= \frac{\left( v_{i} + v_{f} \right)}{2} \\
    \Delta x &= v_{avg} t \\
    a &= \frac{\left( v_{f} - v_{i} \right)}{t} \\
\end{align}
''')

image
image839×525 42 KB

However, the following seems to work. So, although the Streamlit docs claim that KaTeX supported expressions work with st.latex, it seems that there is a possible bug here.

st.latex(r'''
\begin{aligned}
    v_{avg} &= \frac{\left( v_{i} + v_{f} \right)}{2} \\
    \Delta x &= v_{avg} t \\
    a &= \frac{\left( v_{f} - v_{i} \right)}{t} \\
\end{aligned}
''')

image