diff --git a/apps/client/src/services/syntax_highlight.ts b/apps/client/src/services/syntax_highlight.ts
index 457dd3c83..affadc2f2 100644
--- a/apps/client/src/services/syntax_highlight.ts
+++ b/apps/client/src/services/syntax_highlight.ts
@@ -2,6 +2,8 @@ import { ensureMimeTypes, highlight, highlightAuto, loadTheme, Themes } from "@t
 import mime_types from "./mime_types.js";
 import options from "./options.js";
 
+let highlightingLoaded = false;
+
 export function getStylesheetUrl(theme: string) {
     if (!theme) {
         return null;
@@ -25,6 +27,8 @@ export async function applySyntaxHighlight($container: JQuery<HTMLElement>) {
         return;
     }
 
+    await ensureMimeTypesForHighlighting();
+
     const codeBlocks = $container.find("pre code");
     for (const codeBlock of codeBlocks) {
         const normalizedMimeType = extractLanguageFromClassList(codeBlock);
@@ -58,6 +62,10 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
 }
 
 export async function ensureMimeTypesForHighlighting() {
+    if (highlightingLoaded) {
+        return;
+    }
+
     // Load theme.
     const currentThemeName = String(options.get("codeBlockTheme"));
     loadHighlightingTheme(currentThemeName);
@@ -65,6 +73,8 @@ export async function ensureMimeTypesForHighlighting() {
     // Load mime types.
     const mimeTypes = mime_types.getMimeTypes();
     await ensureMimeTypes(mimeTypes);
+
+    highlightingLoaded = true;
 }
 
 export function loadHighlightingTheme(themeName: string) {