diff --git a/code-editor/src/App.tsx b/code-editor/src/App.tsx
index 9c42e08..242ec69 100644
--- a/code-editor/src/App.tsx
+++ b/code-editor/src/App.tsx
@@ -55,8 +55,8 @@ function App() {
             defaultLanguage={file.language}
             defaultValue={file.value}
             options={{ automaticLayout: true, minimap: { enabled: false } }}
-            beforeMount={(monaco: Monaco) => {
-              shikiToMonaco(highlighter, monaco);
+            beforeMount={async (monaco: Monaco) => {
+              shikiToMonaco(await highlighter, monaco);
             }}
           />
         </TabsContent>
@@ -67,8 +67,8 @@ function App() {
             original={file.value}
             modified={file.value}
             options={{ automaticLayout: true, minimap: { enabled: false } }}
-            beforeMount={(monaco: Monaco) => {
-              shikiToMonaco(highlighter, monaco);
+            beforeMount={async (monaco: Monaco) => {
+              shikiToMonaco(await highlighter, monaco);
             }}
           />
         </TabsContent>
diff --git a/code-editor/src/lib/shiki.ts b/code-editor/src/lib/shiki.ts
index c57cc31..305b82d 100644
--- a/code-editor/src/lib/shiki.ts
+++ b/code-editor/src/lib/shiki.ts
@@ -10,7 +10,11 @@ const SUPPORTED_EDITOR_LANGUAGES_ID = Object.values(
   SUPPORTED_EDITOR_LANGUAGES_CONFIG
 ).map((language: { id: string }) => language.id);
 
-export const highlighter = await createHighlighter({
-  themes: SUPPORTED_EDITOR_THEMES_ID,
-  langs: SUPPORTED_EDITOR_LANGUAGES_ID,
-});
+async function initHighlighter() {
+  return await createHighlighter({
+    themes: SUPPORTED_EDITOR_THEMES_ID,
+    langs: SUPPORTED_EDITOR_LANGUAGES_ID,
+  });
+}
+
+export const highlighter = initHighlighter();