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

@@ -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`

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">