pythonlatexpy-shiny

How to render LaTeX in Shiny for Python?


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

Solution

  • 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/katex@0.16.0/dist/katex.min.css"
        ),
        ui.tags.script(src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js"),
        ui.tags.script(src="https://cdn.jsdelivr.net/npm/katex@0.16.0/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/katex@0.16.0/dist/katex.min.css"
        ),
        ui.tags.script(src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js"),
        ui.tags.script(src="https://cdn.jsdelivr.net/npm/katex@0.16.0/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())