From d1e8f68525e316383527b52db2ba77fea530649e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Thu, 8 Feb 2024 02:48:29 +0700
Subject: [PATCH] Ensure the highlighter CSS is loaded when highlighting
 snippets

---
 assets/js/hooks/cell_editor/live_editor/highlight.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/assets/js/hooks/cell_editor/live_editor/highlight.js b/assets/js/hooks/cell_editor/live_editor/highlight.js
index c815a2456..c5121ba1b 100644
--- a/assets/js/hooks/cell_editor/live_editor/highlight.js
+++ b/assets/js/hooks/cell_editor/live_editor/highlight.js
@@ -1,5 +1,6 @@
 import { LanguageDescription } from "@codemirror/language";
 import { highlightCode } from "@lezer/highlight";
+import { StyleModule } from "style-mod";
 import { languages } from "./codemirror/languages";
 import { highlightStyle, lightHighlightStyle } from "./codemirror/theme";
 import { escapeHtml } from "../../../lib/utils";
@@ -15,6 +16,11 @@ export function highlight(code, language) {
     return escapeHtml(code);
   }
 
+  const highlightStyle = getHighlightStyle();
+
+  // Ensure the highlighter CSS is added to the page
+  StyleModule.mount(window.document, highlightStyle.module);
+
   const tree = languageDesc.support.language.parser.parse(code);
 
   let html = "";
@@ -22,7 +28,7 @@ export function highlight(code, language) {
   highlightCode(
     code,
     tree,
-    getHighlightStyle(),
+    highlightStyle,
     (code, classes) => {
       html += `<span class="${classes}">${escapeHtml(code)}</span>`;
     },