初始化模版工程

components/nova-sdk/task-panel/Preview/HighlighterProvider.tsx

@@ -0,0 +1,64 @@
+import React, { createContext, useEffect, useState } from 'react'
+import { createHighlighterCore, type HighlighterCore } from 'shiki/core'
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
+
+export const HighlighterContext = createContext<HighlighterCore | null>(null)
+
+export interface HighlighterProviderProps {
+  children: React.ReactNode
+}
+
+/**
+ * Shiki Highlighter Provider - 提供全局的代码高亮器实例
+ */
+export function HighlighterProvider({ children }: HighlighterProviderProps) {
+  const [highlighter, setHighlighter] = useState<HighlighterCore | null>(null)
+
+  useEffect(() => {
+    let mounted = true
+
+    createHighlighterCore({
+      themes: [
+        import('@shikijs/themes/github-light'),
+        import('@shikijs/themes/github-dark-default'),
+        import('@shikijs/themes/vitesse-dark'),
+        import('@shikijs/themes/one-light'),
+        import('@shikijs/themes/snazzy-light'),
+        import('@shikijs/themes/everforest-light'),
+      ],
+      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(h => {
+      if (mounted) {
+        setHighlighter(h)
+      }
+    })
+
+    return () => {
+      mounted = false
+      highlighter?.dispose()
+    }
+  }, [])
+
+  return (
+    <HighlighterContext.Provider value={highlighter}>
+      {children}
+    </HighlighterContext.Provider>
+  )
+}
+
+export default HighlighterProvider