初始化模版工程

components/nova-sdk/task-panel/Preview/useHighlighter.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+import { createHighlighterCore, type HighlighterCore } from 'shiki/core'
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
+
+export function useHighlighter(_highlighter?: HighlighterCore | null) {
+  const [highlighter, setHighlighter] = useState<HighlighterCore | null>(null)
+
+  useEffect(() => {
+    if (_highlighter) {
+      return
+    }
+
+    createHighlighterCore({
+      themes: [
+        import('@shikijs/themes/one-light'),
+        import('@shikijs/themes/vitesse-dark'),
+        import('@shikijs/themes/snazzy-light'),
+        import('@shikijs/themes/everforest-light'),
+        import('@shikijs/themes/github-dark-default'),
+      ],
+      langs: [
+        import('@shikijs/langs/css'),
+        import('@shikijs/langs/javascript'),
+        import('@shikijs/langs/tsx'),
+        import('@shikijs/langs/jsx'),
+        import('@shikijs/langs/xml'),
+        import('@shikijs/langs/html'),
+        import('@shikijs/langs/python'),
+        import('@shikijs/langs/sh'),
+        import('@shikijs/langs/json'),
+        import('@shikijs/langs/sql'),
+        import('@shikijs/langs/nginx'),
+        import('@shikijs/langs/mermaid'),
+        import('@shikijs/langs/markdown'),
+      ],
+      engine: createOnigurumaEngine(import('shiki/wasm')),
+    }).then(highlighter => {
+      setHighlighter(highlighter)
+    })
+  }, [_highlighter])
+
+  useEffect(() => {
+    return () => {
+      highlighter?.dispose()
+    }
+  }, [highlighter])
+
+  return _highlighter || highlighter
+}