diff --git a/.changeset/eighty-animals-judge.md b/.changeset/eighty-animals-judge.md
new file mode 100644
index 000000000000..459b34b24ec8
--- /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 c68a2cbde0bf..06d63f6be03f 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">