How to render LaTeX in Shiny for Python?

Question

I'm trying to find if there is a way to render LaTeX formulas in Shiny for Python or any low-hanging fruit workaround for that.

Documentation doesn't have any LaTeX mentions, so looks like there's no dedicated functionality to support it. Also double-checked different variations of Latex in their playground.

Tried this but didn't work:

from shiny.express import input, render, ui


@render.text
def txt():
    equation = r"$$\[3 \times 3+3-3 \]$$".strip()
    return equation

Answer 1

You can import Katex. I got here via https://stackoverflow.com/a/65540803/5599595. Running in shinylive

from shiny.express import ui
from shiny import render

with ui.tags.head():
    # Link KaTeX CSS
    ui.tags.link(
        rel="stylesheet",
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
    ),
    ui.tags.script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"),
    ui.tags.script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"),
    ui.tags.script("""
        document.addEventListener('DOMContentLoaded', function() {
            renderMathInElement(document.body);
        });
    """)

with ui.card():
    ui.p("Here's a quadratic formula: \\[x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\\]")
    ui.p("And an inline equation: \\(E = mc^2\\)")
    ui.p("\\[3 \\times 3+3-3 \\]")

Here's an alternative which can render the array running in shiny live:

from shiny.express import ui
from shiny import render

with ui.tags.head():
    ui.tags.link(
        rel="stylesheet",
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
    ),
    ui.tags.script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"),
    ui.tags.script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"),
    ui.tags.script("""
        document.addEventListener('DOMContentLoaded', function() {
            renderMathInElement(document.body, {
                    delimiters: [
                    {left: "$$", right: "$$", display: true},
                    {left: "\\[", right: "\\]", display: true},
                    {left: "$", right: "$", display: false},
                    {left: "\\(", right: "\\)", display: false}
                ]
            });
        });
    """)

with ui.card():
    ui.p("Here's a quadratic formula: $$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$$")
    ui.p("And an inline equation: $$E = mc^2$$")
    ui.p("And simple math $$3 \\times 3+3-3$$")

    # KaTeX tables https://www.redgregory.com/notion/2020/12/23/a-katex-table-cheatsheet-for-notion
    ui.p("Table 1 $$ \\begin{array}{cc} a & b \\\\ c & d \\end{array} $$")
    ui.p("""Table 2
    $$ \\begin{array} {|c|c|}
    \\hline
    A & B \\\\
    \\hline
    1 & 2 \\\\
    \\hline
    3 & 4 \\\\
    \\hline
    \\end{array} $$
    """.strip())