From e4e7a4319924aaf51dcb18d07d0c9953d4011074 Mon Sep 17 00:00:00 2001
From: Abubakar Abid <abubakar@huggingface.co>
Date: Thu, 31 Aug 2023 17:28:01 -0700
Subject: [PATCH] Renders LaTeX that is added to the page in `gr.Markdown`,
 `gr.Chatbot`, and `gr.DataFrame` (#5393)

* fix

* add changeset

* add changeset

* cleanup

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/eighty-animals-judge.md     |  6 ++++++
 js/markdown/static/MarkdownCode.svelte | 17 ++---------------
 2 files changed, 8 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/eighty-animals-judge.md

diff --git a/.changeset/eighty-animals-judge.md b/.changeset/eighty-animals-judge.md
new file mode 100644
index 0000000000..459b34b24e
--- /dev/null
+++ b/.changeset/eighty-animals-judge.md
@@ -0,0 +1,6 @@
+---
+"@gradio/markdown": patch
+"gradio": patch
+---
+
+fix:Renders LaTeX that is added to the page in `gr.Markdown`, `gr.Chatbot`, and `gr.DataFrame`
diff --git a/js/markdown/static/MarkdownCode.svelte b/js/markdown/static/MarkdownCode.svelte
index c68a2cbde0..06d63f6be0 100644
--- a/js/markdown/static/MarkdownCode.svelte
+++ b/js/markdown/static/MarkdownCode.svelte
@@ -1,21 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
+	import { afterUpdate, createEventDispatcher } from "svelte";
 	import DOMPurify from "dompurify";
 	import render_math_in_element from "katex/dist/contrib/auto-render.js";
 	import "katex/dist/katex.min.css";
-
 	import { marked } from "./utils";
-	const dispatch = createEventDispatcher();
-
 	import "./prism.css";
-	// import "./prism-dark.css";
-
-	// const code_highlight_css = {
-	// 	light: (): Promise<typeof import("prismjs/themes/prism.css")> =>
-	// 		import("prismjs/themes/prism.css"),
-	// 	dark: (): Promise<typeof import("prismjs/themes/prism.css")> =>
-	// 		import("prismjs/themes/prism-dark.css")
-	// };
 
 	export let chatbot = true;
 	export let message: string;
@@ -35,9 +24,6 @@
 			node.setAttribute("rel", "noopener noreferrer");
 		}
 	});
-
-	$: el && html && render_html(message);
-
 	$: if (message && message.trim()) {
 		html = sanitize_html
 			? DOMPurify.sanitize(marked.parse(message))
@@ -53,6 +39,7 @@
 			});
 		}
 	}
+	afterUpdate(() => render_html(message));
 </script>
 
 <span class:chatbot bind:this={el} class="md">