perf: init shikiji only when needed and limit langs

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()
+    }
   })
 })
 

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 = {

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"