Latex support

demo/blocks_hello/run.py

@@ -5,8 +5,9 @@ def welcome(name):
 
 with gr.Blocks() as demo:
     gr.Markdown(
-    """
+    r"""
     # Hello World!
+    $\frac{\sqrt{x + y}}{4}$
     Start typing below to see the output.
     """)
     inp = gr.Textbox(placeholder="What is your name?")

gradio/components.py

@@ -27,6 +27,7 @@
 import PIL.ImageOps
 from ffmpy import FFmpeg
 from markdown_it import MarkdownIt
+from mdit_py_plugins.dollarmath import dollarmath_plugin
 
 from gradio import media_data, processing_utils, utils
 from gradio.blocks import Block
@@ -2500,7 +2501,7 @@ def __process_markdown(cls, data: List[List[Any]], datatype: List[str]):
             return data
 
         if cls.markdown_parser is None:
-            cls.markdown_parser = MarkdownIt().enable("table")
+            cls.markdown_parser = MarkdownIt().use(dollarmath_plugin).enable("table")
 
         for i in range(len(data)):
             for j in range(len(data[i])):
@@ -3921,7 +3922,7 @@ def __init__(
             visible: If False, component will be hidden.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
         """
-        self.md = MarkdownIt().enable("table")
+        self.md = MarkdownIt().use(dollarmath_plugin).enable("table")
         IOComponent.__init__(
             self, visible=visible, elem_id=elem_id, value=value, **kwargs
         )

gradio/interface.py

@@ -16,6 +16,7 @@
 from typing import TYPE_CHECKING, Any, Callable, List, Optional
 
 from markdown_it import MarkdownIt
+from mdit_py_plugins.dollarmath import dollarmath_plugin
 from mdit_py_plugins.footnote import footnote_plugin
 
 from gradio import Examples, interpretation, utils
@@ -309,6 +310,7 @@ def clean_html(raw_html):
                     "html": True,
                 },
             )
+            .use(dollarmath_plugin)
             .use(footnote_plugin)
             .enable("table")
         )

ui/packages/markdown/src/Markdown.svelte

@@ -1,14 +1,28 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import "./typography.css";
-
 	export let elem_id: string = "";
 	export let visible: boolean = true;
 	export let value: string;
 	export let min_height = false;
+	import { afterUpdate } from "svelte";
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
+	let target: HTMLElement;
+	let katex: Module | undefined;
+	afterUpdate(async () => {
+		let latex_elements = target.querySelectorAll(".math");
+		if (latex_elements.length === 0) {
+			return;
+		}
+
+		if (katex === undefined) {
+			katex = await import("./katex");
+		}
+		katex.render(latex_elements);
+	});
+
 	$: value, dispatch("change");
 </script>
 
@@ -18,6 +32,7 @@
 	class="output-markdown gr-prose"
 	class:hidden={!visible}
 	style="max-width: 100%"
+	bind:this={target}
 >
 	{@html value}
 </div>

ui/packages/markdown/src/katex/index.ts

@@ -0,0 +1,8 @@
+import katex from "katex";
+import "./katex.min.css";
+
+export function render(elements: Array<HTMLElement>) {
+	elements.forEach((element) => {
+		katex.render(element.innerText, element);
+	});
+}

ui/packages/markdown/src/katex/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "katex",
+	"version": "1.0.0",
+	"description": "",
+	"main": "index.ts",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"author": "",
+	"license": "ISC",
+	"dependencies": {
+		"katex": "^0.16.3"
+	}
+}