From dd5d4b04f7e8ff6ae09a8bb437e5dff3ac2aa3dc Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 12 Jul 2025 22:26:07 +0200
Subject: [PATCH] perf: init shikiji only when needed and limit langs

---
 src/components/StackedNote.vue |  5 +++++
 src/hooks/useMarkdown.hook.ts  | 21 ++++++++++++++++++---
 src/shims-vue.d.ts             | 23 +++++++++++------------
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 3ddd9d3..3051141 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -21,6 +21,7 @@ import { encodeUTF8ToBase64 } from "@/utils/decodeBase64ToUTF8"
 import { filenameToNoteTitle } from "@/utils/noteTitle"
 import { generateTweets } from "@/utils/twitter"
 import mermaid from "mermaid"
+import { useShikiji } from "@/hooks/useMarkdown.hook"
 
 const LinkedNotes = defineAsyncComponent(
   () => import("@/components/LinkedNotes.vue"),
@@ -98,6 +99,10 @@ watch([content, mode], () => {
         querySelector: `.note-${sha.value} .mermaid`,
       })
     }
+
+    if (rawContent.value.includes("```")) {
+      useShikiji()
+    }
   })
 })
 
diff --git a/src/hooks/useMarkdown.hook.ts b/src/hooks/useMarkdown.hook.ts
index edbe966..4c9f5a3 100644
--- a/src/hooks/useMarkdown.hook.ts
+++ b/src/hooks/useMarkdown.hook.ts
@@ -74,19 +74,34 @@ const md = new MarkdownIt({
   })
   .use(MarkdownItGitHubAlerts)
 
-const useShikiji = async () => {
+let shikijiInitialized = false
+
+export const useShikiji = async () => {
+  if (shikijiInitialized) {
+    return
+  }
+
+  shikijiInitialized = true
   md.use(
     await Shikiji({
       themes: {
         light: "vitesse-light",
         dark: "vitesse-black",
       },
+      langs: [
+        "bash",
+        "javascript",
+        "typescript",
+        "markdown",
+        "mermaid",
+        "html",
+        "css",
+        "json",
+      ],
     }),
   )
 }
 
-useShikiji()
-
 mermaid.initialize({ startOnLoad: false, flowchart: { curve: "natural" } })
 
 const rules: Renderer.RenderRuleRecord = {
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 843420b..3c05159 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -1,15 +1,14 @@
-declare module '*.vue' {
-  import { defineComponent } from 'vue'
+declare module "*.vue" {
+  import { defineComponent } from "vue"
   const component: ReturnType<typeof defineComponent>
   export default component
 }
-declare module 'pouchdb-adapter-indexeddb'
-declare module '@toycode/markdown-it-class'
-declare module 'markdown-it-block-embed'
-declare module 'markdown-it-checkbox'
-declare module 'markdown-it-footnote'
-declare module 'markdown-it-regexp'
-declare module 'markdown-it-iframe'
-declare module 'markdown-it-shikiji'
-declare module '@rushstack/eslint-patch/modern-module-resolution'
-declare module 'pastel-color'
+declare module "pouchdb-adapter-indexeddb"
+declare module "@toycode/markdown-it-class"
+declare module "markdown-it-block-embed"
+declare module "markdown-it-checkbox"
+declare module "markdown-it-footnote"
+declare module "markdown-it-regexp"
+declare module "markdown-it-iframe"
+declare module "@rushstack/eslint-patch/modern-module-resolution"
+declare module "pastel-color"