Latex support

[kashif]

Description

Started to add math support for markdown

Closes: #538

Checklist:

• I have performed a self-review of my own code
• I have added a short summary of my change to the CHANGELOG.md
• My code follows the style guidelines of this project
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by [@myusername](link-to-your-github-profile) in [PR 11111](https://github.com/gradio-app/gradio/pull/11111)".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the
GitHub web UI since that lets you upload files directly via drag-and-drop.

[pngwn]

We don't want to vendor in the css and fonts here, that will be difficult to maintain. We can load them directly from the node package via katex/path/to/assets. Vite can handle css and fonts.

[aliabid94]

I've implemented support for rendering mathtext serverside, a subset of latex that ships with matplotlib. Screenshot from demo/latex/run.py

corresponding code:

    gr.Markdown(
    r"""
    # Hello World! $\frac{\sqrt{x + y}}{4}$ is today's lesson

    ## the $\sqrt{x + y}$ is first

    Start with $\frac{\frac{x+1}{x+2}}{x+3}$ then we get $x+2$
    
    There are three formulas to know:
    
    the first is $\gamma^2 + \theta^2 = \omega^2$
    
    $\sqrt{x^2+1}$ is next
    
    Integral $\int_{a}^{b} x^2 \,dx$ is last

    Start typing below to see the output.
    """)

[kashif]

nice!

[github-actions]

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

[github-actions]

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

[github-actions]

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

[abidlabs]

Very nice. I added some LaTeX to demo/blocks_kinematics and it looks great!

Two nits:

• Let's add documentation for this (maybe in the docstring for Markdown component) as well as tests to prevent regressions
• I get this warning when I include LaTeX:

savefig() got unexpected keyword argument "frameon" which is no longer supported as of 3.3 and will become an error two minor releases later

You might have to set facecolor='white', transparent=False instead according to this answer: https://stackoverflow.com/questions/59204749/matplotlib-savefig-background-always-transparent

[abidlabs]

LGTM besides a couple of nits (see above)

[kashif]

@abidlabs and how does it look in "dark mode"?

[abidlabs]

@kashif good question -- it looks good to me:

[aliabid94]

also there is a hidden formula span, so if you try to copy text with latex, it will render the formula.

[aliabid94]

@abidlabs I am not able to reproduce your warning - can you check if your suggestion works?

[abidlabs]

@abidlabs I am not able to reproduce your warning - can you check if your suggestion works?

I upgraded to the latest version of matplotlib and it is indeed throwing an error! Sure I'll see if I can fix it on my end

[abidlabs]

Ok so I just removed the frameon parameter and it looks like it's fine now @aliabid94

Now the Latex is rendered server-side so this concern is no longer relevant

[github-actions]

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

[kashif]

awesome! thanks!