From d1a9b0f811ce233feba3055fa83461e935158952 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Tue, 10 Mar 2026 23:09:36 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(highlighter):=20add=20minimal?=
 =?UTF-8?q?=20shiki-based=20renderer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add minimal syntax highlighter and export public API
- Refactor shiki usage to dynamic imports for langs/themes and streaming

Made-with: Cursor
---
 src/Highlighter/LangSelect.tsx                | 112 +++++++-----
 .../SyntaxHighlighter/StreamRenderer.tsx      |  19 +-
 src/Highlighter/const.ts                      |  40 +----
 src/Highlighter/langUtils.ts                  |  43 +++++
 .../SyntaxHighlighterMinimal.tsx              |  58 +++++++
 src/HighlighterMinimal/highlighter.ts         |  96 +++++++++++
 src/HighlighterMinimal/index.ts               |   3 +
 src/awesome/Spline/Spine.tsx                  | 103 ++++-------
 src/hooks/useHighlight.ts                     | 162 +++++++++---------
 src/hooks/useStreamHighlight.ts               |  37 ++--
 src/index.ts                                  |   5 +
 11 files changed, 435 insertions(+), 243 deletions(-)
 create mode 100644 src/Highlighter/langUtils.ts
 create mode 100644 src/HighlighterMinimal/SyntaxHighlighterMinimal.tsx
 create mode 100644 src/HighlighterMinimal/highlighter.ts
 create mode 100644 src/HighlighterMinimal/index.ts

diff --git a/src/Highlighter/LangSelect.tsx b/src/Highlighter/LangSelect.tsx
index 5bb1c20dd..75fbf4f42 100644
--- a/src/Highlighter/LangSelect.tsx
+++ b/src/Highlighter/LangSelect.tsx
@@ -1,8 +1,7 @@
 'use client';
 
 import { Select, type SelectProps } from 'antd';
-import { memo, useMemo } from 'react';
-import { bundledLanguagesInfo } from 'shiki';
+import { memo, useEffect, useState } from 'react';
 
 import { Flexbox } from '@/Flex';
 import MaterialFileTypeIcon from '@/MaterialFileTypeIcon';
@@ -10,51 +9,70 @@ import Text from '@/Text';
 import { stopPropagation } from '@/utils/dom';
 
 export const LangSelect = memo<Omit<SelectProps, 'options'>>(({ ...rest }) => {
-  const options = useMemo(
-    () => [
-      {
-        aliases: ['text', 'txt'],
-        label: (
-          <Flexbox horizontal align={'center'} gap={4}>
-            <MaterialFileTypeIcon
-              fallbackUnknownType={false}
-              filename={`*.txt`}
-              size={18}
-              type={'file'}
-              variant={'raw'}
-            />
-            <Text ellipsis fontSize={13}>
-              Plaintext
-            </Text>
-          </Flexbox>
-        ),
-        value: 'plaintext',
-      },
-      ...bundledLanguagesInfo.map((item) => ({
-        aliases: item.aliases,
-        label: (
-          <Flexbox horizontal align={'center'} gap={4}>
-            <MaterialFileTypeIcon
-              fallbackUnknownType={false}
-              filename={`*.${item?.aliases?.[0] || item.id}`}
-              size={18}
-              type={'file'}
-              variant={'raw'}
-            />
-            <Text ellipsis fontSize={13}>
-              {item.name}
-            </Text>
-          </Flexbox>
-        ),
-        title: (item.aliases || [item.id])
-          .filter(Boolean)
-          .map((item) => `*.${item}`)
-          .join(','),
-        value: item.id,
-      })),
-    ],
-    [],
-  );
+  const [options, setOptions] = useState<SelectProps['options']>([
+    {
+      label: (
+        <Flexbox horizontal align={'center'} gap={4}>
+          <MaterialFileTypeIcon
+            fallbackUnknownType={false}
+            filename={`*.txt`}
+            size={18}
+            type={'file'}
+            variant={'raw'}
+          />
+          <Text ellipsis fontSize={13}>
+            Plaintext
+          </Text>
+        </Flexbox>
+      ),
+      value: 'plaintext',
+    },
+  ]);
+
+  useEffect(() => {
+    import('shiki/langs').then(({ bundledLanguagesInfo }) => {
+      setOptions([
+        {
+          label: (
+            <Flexbox horizontal align={'center'} gap={4}>
+              <MaterialFileTypeIcon
+                fallbackUnknownType={false}
+                filename={`*.txt`}
+                size={18}
+                type={'file'}
+                variant={'raw'}
+              />
+              <Text ellipsis fontSize={13}>
+                Plaintext
+              </Text>
+            </Flexbox>
+          ),
+          value: 'plaintext',
+        },
+        ...bundledLanguagesInfo.map((item) => ({
+          label: (
+            <Flexbox horizontal align={'center'} gap={4}>
+              <MaterialFileTypeIcon
+                fallbackUnknownType={false}
+                filename={`*.${item?.aliases?.[0] || item.id}`}
+                size={18}
+                type={'file'}
+                variant={'raw'}
+              />
+              <Text ellipsis fontSize={13}>
+                {item.name}
+              </Text>
+            </Flexbox>
+          ),
+          title: (item.aliases || [item.id])
+            .filter(Boolean)
+            .map((item) => `*.${item}`)
+            .join(','),
+          value: item.id,
+        })),
+      ]);
+    });
+  }, []);
 
   return (
     <Select
diff --git a/src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx b/src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx
index da846ed52..3549744f7 100644
--- a/src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx
+++ b/src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { getTokenStyleObject } from '@shikijs/core';
 import { cx } from 'antd-style';
 import type { CSSProperties } from 'react';
 import { memo } from 'react';
@@ -18,6 +17,24 @@ interface StreamRendererProps {
   theme?: BuiltinTheme;
 }
 
+// FontStyle bitmask values from @shikijs/vscode-textmate
+const FontStyle = { Bold: 2, Italic: 1, Strikethrough: 8, Underline: 4 } as const;
+
+const getTokenStyleObject = (token: ThemedToken): Record<string, string> => {
+  const styles: Record<string, string> = {};
+  if (token.color) styles.color = token.color;
+  if (token.bgColor) styles['background-color'] = token.bgColor;
+  if (token.fontStyle) {
+    if (token.fontStyle & FontStyle.Italic) styles['font-style'] = 'italic';
+    if (token.fontStyle & FontStyle.Bold) styles['font-weight'] = 'bold';
+    const decorations: string[] = [];
+    if (token.fontStyle & FontStyle.Underline) decorations.push('underline');
+    if (token.fontStyle & FontStyle.Strikethrough) decorations.push('line-through');
+    if (decorations.length) styles['text-decoration'] = decorations.join(' ');
+  }
+  return styles;
+};
+
 const normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {
   const normalized: CSSProperties = {};
   Object.entries(style).forEach(([key, value]) => {
diff --git a/src/Highlighter/const.ts b/src/Highlighter/const.ts
index ef87fac8c..77b4ecfc1 100644
--- a/src/Highlighter/const.ts
+++ b/src/Highlighter/const.ts
@@ -1,5 +1,3 @@
-import { bundledLanguagesInfo, bundledThemesInfo } from 'shiki';
-
 interface HighlighterThemeItem {
   displayName: string;
   id: string;
@@ -10,47 +8,21 @@ export const highlighterThemes: HighlighterThemeItem[] = [
     displayName: 'Lobe Theme',
     id: 'lobe-theme',
   },
-  ...bundledThemesInfo.map((item) => ({
-    displayName: item.displayName,
-    id: item.id,
-  })),
 ];
 
 export const FALLBACK_LANG = 'plaintext';
 
 export const getCodeLanguageByInput = (input: string): string => {
-  if (!input) {
-    return 'plaintext';
-  }
-  const inputLang = input.toLocaleLowerCase();
-
-  const matchLang = bundledLanguagesInfo.find(
-    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),
-  );
-  return matchLang?.id || 'plaintext';
+  if (!input) return 'plaintext';
+  return input.toLocaleLowerCase();
 };
 
 export const getCodeLanguageFilename = (input: string): string => {
-  if (!input) {
-    return 'Plaintext';
-  }
-  const inputLang = input.toLocaleLowerCase();
-
-  const matchLang = bundledLanguagesInfo.find(
-    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),
-  );
-  const type = matchLang?.aliases?.[0] || matchLang?.id || 'txt';
-  return `*.${type}`;
+  if (!input) return 'Plaintext';
+  return `*.${input.toLocaleLowerCase()}`;
 };
 
 export const getCodeLanguageDisplayName = (input: string): string => {
-  if (!input) {
-    return 'Plaintext';
-  }
-  const inputLang = input.toLocaleLowerCase();
-
-  const matchLang = bundledLanguagesInfo.find(
-    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),
-  );
-  return matchLang?.name || 'Plaintext';
+  if (!input) return 'Plaintext';
+  return input.charAt(0).toUpperCase() + input.slice(1);
 };
diff --git a/src/Highlighter/langUtils.ts b/src/Highlighter/langUtils.ts
new file mode 100644
index 000000000..c7aa777ff
--- /dev/null
+++ b/src/Highlighter/langUtils.ts
@@ -0,0 +1,43 @@
+import { bundledLanguagesInfo } from 'shiki/langs';
+import { bundledThemesInfo } from 'shiki/themes';
+
+interface HighlighterThemeItem {
+  displayName: string;
+  id: string;
+}
+
+export const getAllHighlighterThemes = (): HighlighterThemeItem[] => [
+  { displayName: 'Lobe Theme', id: 'lobe-theme' },
+  ...bundledThemesInfo.map((item) => ({
+    displayName: item.displayName,
+    id: item.id,
+  })),
+];
+
+export const resolveLanguageByInput = (input: string): string => {
+  if (!input) return 'plaintext';
+  const inputLang = input.toLocaleLowerCase();
+  const matchLang = bundledLanguagesInfo.find(
+    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),
+  );
+  return matchLang?.id || 'plaintext';
+};
+
+export const resolveLanguageFilename = (input: string): string => {
+  if (!input) return 'Plaintext';
+  const inputLang = input.toLocaleLowerCase();
+  const matchLang = bundledLanguagesInfo.find(
+    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),
+  );
+  const type = matchLang?.aliases?.[0] || matchLang?.id || 'txt';
+  return `*.${type}`;
+};
+
+export const resolveLanguageDisplayName = (input: string): string => {
+  if (!input) return 'Plaintext';
+  const inputLang = input.toLocaleLowerCase();
+  const matchLang = bundledLanguagesInfo.find(
+    (lang) => lang.id === inputLang || lang.aliases?.includes(inputLang),
+  );
+  return matchLang?.name || 'Plaintext';
+};
diff --git a/src/HighlighterMinimal/SyntaxHighlighterMinimal.tsx b/src/HighlighterMinimal/SyntaxHighlighterMinimal.tsx
new file mode 100644
index 000000000..d62a51b6a
--- /dev/null
+++ b/src/HighlighterMinimal/SyntaxHighlighterMinimal.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { cx } from 'antd-style';
+import { type CSSProperties, memo } from 'react';
+
+import { variants } from '@/Highlighter/SyntaxHighlighter/style';
+
+import { useMinimalHighlight } from './highlighter';
+
+const escapeHtml = (str: string) =>
+  str
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#039;');
+
+export interface SyntaxHighlighterMinimalProps {
+  children: string;
+  className?: string;
+  language: string;
+  style?: CSSProperties;
+  variant?: 'filled' | 'outlined' | 'borderless';
+}
+
+const SyntaxHighlighterMinimal = memo<SyntaxHighlighterMinimalProps>(
+  ({ children, className, language, style, variant = 'borderless' }) => {
+    const safeChildren = children ?? '';
+    const data = useMinimalHighlight(safeChildren, language);
+    const hasData = typeof data === 'string' && data.length > 0;
+
+    const shikiClassName = cx(
+      variants({ animated: false, shiki: true, showBackground: false, variant }),
+      className,
+    );
+    const fallbackClassName = cx(
+      variants({ animated: false, shiki: false, showBackground: false, variant }),
+      className,
+    );
+
+    return (
+      <div
+        className={hasData ? shikiClassName : fallbackClassName}
+        dir="ltr"
+        style={style}
+        dangerouslySetInnerHTML={{
+          __html: data || `<pre><code>${escapeHtml(safeChildren)}</code></pre>`,
+        }}
+      />
+    );
+  },
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children && prevProps.language === nextProps.language,
+);
+
+SyntaxHighlighterMinimal.displayName = 'SyntaxHighlighterMinimal';
+
+export default SyntaxHighlighterMinimal;
diff --git a/src/HighlighterMinimal/highlighter.ts b/src/HighlighterMinimal/highlighter.ts
new file mode 100644
index 000000000..a47ad2b2a
--- /dev/null
+++ b/src/HighlighterMinimal/highlighter.ts
@@ -0,0 +1,96 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { HighlighterCore } from 'shiki/core';
+
+import lobeTheme from '@/Highlighter/theme/lobe-theme';
+
+let highlighterPromise: Promise<HighlighterCore> | null = null;
+
+const getOrCreateMinimalHighlighter = (): Promise<HighlighterCore> | null => {
+  if (typeof window === 'undefined') return null;
+  if (!highlighterPromise) {
+    highlighterPromise = (async () => {
+      const [{ createHighlighterCore }, { createOnigurumaEngine }, { bundledLanguages }] =
+        await Promise.all([
+          import('shiki/core'),
+          import('shiki/engine/oniguruma'),
+          import('shiki/langs'),
+        ]);
+
+      const highlighter = await createHighlighterCore({
+        engine: createOnigurumaEngine(() => import('shiki/wasm')),
+      });
+
+      const presetLangs = [
+        'json',
+        'javascript',
+        'typescript',
+        'tsx',
+        'jsx',
+        'markdown',
+        'bash',
+        'shellscript',
+        'yaml',
+        'css',
+        'html',
+        'python',
+      ] as const;
+
+      await Promise.all(
+        presetLangs.map(async (id) => {
+          const loader = bundledLanguages[id];
+          if (loader) {
+            await highlighter.loadLanguage(await loader());
+          }
+        }),
+      );
+
+      await highlighter.loadTheme(lobeTheme as any);
+
+      return highlighter;
+    })();
+  }
+  return highlighterPromise;
+};
+
+export const useMinimalHighlight = (text: string, language: string): string => {
+  const safeText = text ?? '';
+  const lang = (language ?? 'plaintext').toLowerCase();
+
+  const [html, setHtml] = useState('');
+
+  useEffect(() => {
+    if (!safeText) {
+      setHtml('');
+      return;
+    }
+
+    let cancelled = false;
+
+    (async () => {
+      const highlighter = await getOrCreateMinimalHighlighter();
+      if (!highlighter || cancelled) return;
+
+      try {
+        const loadedLangs = highlighter.getLoadedLanguages();
+        const effectiveLang = loadedLangs.includes(lang) ? lang : 'plaintext';
+
+        const result = highlighter.codeToHtml(safeText, {
+          lang: effectiveLang,
+          theme: 'lobe-theme',
+        });
+
+        if (!cancelled) setHtml(result);
+      } catch {
+        if (!cancelled) setHtml('');
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [safeText, lang]);
+
+  return html;
+};
diff --git a/src/HighlighterMinimal/index.ts b/src/HighlighterMinimal/index.ts
new file mode 100644
index 000000000..4a3e0b3bc
--- /dev/null
+++ b/src/HighlighterMinimal/index.ts
@@ -0,0 +1,3 @@
+export { useMinimalHighlight } from './highlighter';
+export type { SyntaxHighlighterMinimalProps } from './SyntaxHighlighterMinimal';
+export { default as SyntaxHighlighterMinimal } from './SyntaxHighlighterMinimal';
diff --git a/src/awesome/Spline/Spine.tsx b/src/awesome/Spline/Spine.tsx
index 70722e3b5..219bab336 100644
--- a/src/awesome/Spline/Spine.tsx
+++ b/src/awesome/Spline/Spine.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { type SplineEvent, type SplineEventName } from '@splinetool/runtime';
-import { Application } from '@splinetool/runtime';
+import type { SplineEvent, SplineEventName } from '@splinetool/runtime';
 import { memo, useEffect, useRef, useState } from 'react';
 
 import ParentSize from './ParentSize';
@@ -28,84 +27,56 @@ const Spline = memo<SplineProps>(
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const [isLoading, setIsLoading] = useState(true);
 
-    const init = async (
-      speApp: Application,
-      events: {
-        cb?: (e: SplineEvent) => void;
-        name: SplineEventName;
-      }[],
-    ) => {
-      await speApp.load(scene);
-
-      for (const event of events) {
-        if (event.cb) {
-          speApp.addEventListener(event.name, event.cb);
-        }
-      }
-
-      setIsLoading(false);
-      onLoad?.(speApp);
-    };
-
-    // Initialize runtime when component is mounted
     useEffect(() => {
       setIsLoading(true);
+      if (!canvasRef.current) return;
+
+      let disposed = false;
+      let speApp: any;
 
-      let speApp: Application;
       const events: {
         cb?: (e: SplineEvent) => void;
         name: SplineEventName;
       }[] = [
-        {
-          cb: onMouseDown,
-          name: 'mouseDown',
-        },
-        {
-          cb: onMouseUp,
-          name: 'mouseUp',
-        },
-        {
-          cb: onMouseHover,
-          name: 'mouseHover',
-        },
-        {
-          cb: onKeyDown,
-          name: 'keyDown',
-        },
-        {
-          cb: onKeyUp,
-          name: 'keyUp',
-        },
-        {
-          cb: onStart,
-          name: 'start',
-        },
-        {
-          cb: onLookAt,
-          name: 'lookAt',
-        },
-        {
-          cb: onFollow,
-          name: 'follow',
-        },
-        {
-          cb: onWheel,
-          name: 'scroll',
-        },
+        { cb: onMouseDown, name: 'mouseDown' },
+        { cb: onMouseUp, name: 'mouseUp' },
+        { cb: onMouseHover, name: 'mouseHover' },
+        { cb: onKeyDown, name: 'keyDown' },
+        { cb: onKeyUp, name: 'keyUp' },
+        { cb: onStart, name: 'start' },
+        { cb: onLookAt, name: 'lookAt' },
+        { cb: onFollow, name: 'follow' },
+        { cb: onWheel, name: 'scroll' },
       ];
 
-      if (canvasRef.current) {
-        speApp = new Application(canvasRef.current, { renderOnDemand });
-        init(speApp, events);
-      }
+      (async () => {
+        const { Application } = await import('@splinetool/runtime');
+        if (disposed) return;
+
+        speApp = new Application(canvasRef.current!, { renderOnDemand });
+        await speApp.load(scene);
+        if (disposed) return;
 
-      return () => {
         for (const event of events) {
           if (event.cb) {
-            speApp.removeEventListener(event.name, event.cb);
+            speApp.addEventListener(event.name, event.cb);
+          }
+        }
+
+        setIsLoading(false);
+        onLoad?.(speApp);
+      })();
+
+      return () => {
+        disposed = true;
+        if (speApp) {
+          for (const event of events) {
+            if (event.cb) {
+              speApp.removeEventListener(event.name, event.cb);
+            }
           }
+          speApp.dispose();
         }
-        speApp.dispose();
       };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [scene]);
diff --git a/src/hooks/useHighlight.ts b/src/hooks/useHighlight.ts
index 370c6a8bf..fff78da5e 100644
--- a/src/hooks/useHighlight.ts
+++ b/src/hooks/useHighlight.ts
@@ -1,14 +1,8 @@
 'use client';
 
-import {
-  transformerNotationDiff,
-  transformerNotationErrorLevel,
-  transformerNotationFocus,
-  transformerNotationHighlight,
-  transformerNotationWordHighlight,
-} from '@shikijs/transformers';
 import { type CSSProperties, useEffect, useMemo, useState } from 'react';
-import type { BuiltinTheme, CodeToHastOptions, ThemedToken } from 'shiki';
+import type { BuiltinTheme, ThemedToken } from 'shiki';
+import type { HighlighterCore } from 'shiki/core';
 import { Md5 } from 'ts-md5';
 
 import { getCodeLanguageByInput } from '@/Highlighter/const';
@@ -41,30 +35,6 @@ const cleanupCache = () => {
   }
 };
 
-export type ICodeToHtml = (code: string, options: CodeToHastOptions) => Promise<string>;
-export type ShikiModule = typeof import('shiki');
-
-// Use codeToHtml shorthand for better performance
-// It automatically manages highlighter instances and loads themes/languages on-demand
-let codeToHtmlPromise: Promise<ICodeToHtml | null> | null = null;
-
-const loadCodeToHtml = (): Promise<ICodeToHtml | null> => {
-  if (typeof window === 'undefined') return Promise.resolve(null);
-
-  if (!codeToHtmlPromise) {
-    codeToHtmlPromise = import('shiki').then((mod) => mod.codeToHtml ?? null);
-  }
-
-  return codeToHtmlPromise;
-};
-
-// Export shikiModulePromise for useStreamHighlight compatibility
-const loadShikiModule = (): Promise<ShikiModule | null> => {
-  if (typeof window === 'undefined') return Promise.resolve(null);
-  return import('shiki');
-};
-export const shikiModulePromise = loadShikiModule();
-
 // Helper function: Safe HTML escaping
 export const escapeHtml = (str: string): string => {
   return str
@@ -75,11 +45,58 @@ export const escapeHtml = (str: string): string => {
     .replaceAll("'", '&#039;');
 };
 
-// Main highlight component - optimized version without SWR
-const customThemes = {
-  'lobe-theme': lobeTheme,
+// Singleton highlighter using shiki/core for minimal bundle size
+let highlighterPromise: Promise<HighlighterCore> | null = null;
+
+export const getOrCreateHighlighter = (): Promise<HighlighterCore> | null => {
+  if (typeof window === 'undefined') return null;
+  if (!highlighterPromise) {
+    highlighterPromise = (async () => {
+      const [{ createHighlighterCore }, { createOnigurumaEngine }] = await Promise.all([
+        import('shiki/core'),
+        import('shiki/engine/oniguruma'),
+      ]);
+      return createHighlighterCore({
+        engine: createOnigurumaEngine(() => import('shiki/wasm')),
+      });
+    })();
+  }
+  return highlighterPromise;
+};
+
+// Dynamically load a language on demand via shiki/langs
+export const ensureLanguage = async (highlighter: HighlighterCore, lang: string) => {
+  if (highlighter.getLoadedLanguages().includes(lang)) return;
+  try {
+    const { bundledLanguages } = await import('shiki/langs');
+    const loader = bundledLanguages[lang as keyof typeof bundledLanguages];
+    if (loader) {
+      await highlighter.loadLanguage(await loader());
+    }
+  } catch {
+    // Language not found, highlighter will fallback
+  }
 };
 
+// Dynamically load a theme on demand via shiki/themes
+export const ensureTheme = async (highlighter: HighlighterCore, theme: string) => {
+  if (highlighter.getLoadedThemes().includes(theme)) return;
+  if (theme === 'lobe-theme') {
+    await highlighter.loadTheme(lobeTheme as any);
+    return;
+  }
+  try {
+    const { bundledThemes } = await import('shiki/themes');
+    const loader = bundledThemes[theme as keyof typeof bundledThemes];
+    if (loader) {
+      await highlighter.loadTheme(await loader());
+    }
+  } catch {
+    // Theme not found
+  }
+};
+
+// Main highlight hook
 export const useHighlight = (
   text: string,
   {
@@ -96,16 +113,22 @@ export const useHighlight = (
   // Match supported languages
   const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);
 
-  // Optimize transformer creation
-  const transformers = useMemo(() => {
-    if (!enableTransformer) return;
-    return [
-      transformerNotationDiff(),
-      transformerNotationHighlight(),
-      transformerNotationWordHighlight(),
-      transformerNotationFocus(),
-      transformerNotationErrorLevel(),
-    ];
+  // Lazy-load transformers to avoid static @shikijs/transformers import
+  const [transformers, setTransformers] = useState<any[] | undefined>();
+  useEffect(() => {
+    if (!enableTransformer) {
+      setTransformers(undefined);
+      return;
+    }
+    import('@shikijs/transformers').then((mod) => {
+      setTransformers([
+        mod.transformerNotationDiff(),
+        mod.transformerNotationHighlight(),
+        mod.transformerNotationWordHighlight(),
+        mod.transformerNotationFocus(),
+        mod.transformerNotationErrorLevel(),
+      ]);
+    });
   }, [enableTransformer]);
 
   // Build cache key
@@ -138,40 +161,20 @@ export const useHighlight = (
     }
 
     // Create new promise for highlighting
-    // Using codeToHtml shorthand: automatically loads themes/languages on-demand
     const highlightPromise = (async (): Promise<string> => {
       try {
-        // Try full rendering with transformers
-        const shikiModule = await shikiModulePromise;
-        if (!shikiModule) return safeText;
+        const highlighter = await getOrCreateHighlighter();
+        if (!highlighter) return safeText;
 
         const effectiveTheme = builtinTheme || 'lobe-theme';
 
-        // Load custom theme if using slack-dark or slack-ochin
-        if (!builtinTheme && effectiveTheme === 'lobe-theme') {
-          const customTheme = customThemes[effectiveTheme];
-          if (customTheme) {
-            // Use getSingletonHighlighter to load custom theme
-            const highlighter = await shikiModule.getSingletonHighlighter({
-              langs: [matchedLanguage],
-              themes: [customTheme as any],
-            });
-
-            const html = await highlighter.codeToHtml(safeText, {
-              lang: matchedLanguage,
-              theme: effectiveTheme,
-              transformers,
-            });
-
-            return html;
-          }
-        }
-
-        // Fallback to codeToHtml for builtin themes
-        const codeToHtml = await loadCodeToHtml();
-        if (!codeToHtml) return safeText;
+        // Load language and theme on demand
+        await Promise.all([
+          ensureLanguage(highlighter, matchedLanguage),
+          ensureTheme(highlighter, effectiveTheme),
+        ]);
 
-        const html = await codeToHtml(safeText, {
+        const html = highlighter.codeToHtml(safeText, {
           lang: matchedLanguage,
           theme: effectiveTheme,
           transformers,
@@ -182,10 +185,13 @@ export const useHighlight = (
         console.error('Advanced rendering failed:', error_);
 
         try {
-          // Try simple rendering (without transformers)
-          const codeToHtml = await loadCodeToHtml();
-          if (!codeToHtml) return safeText;
-          const html = await codeToHtml(safeText, {
+          const highlighter = await getOrCreateHighlighter();
+          if (!highlighter) return safeText;
+          await Promise.all([
+            ensureLanguage(highlighter, matchedLanguage),
+            ensureTheme(highlighter, 'lobe-theme'),
+          ]);
+          const html = highlighter.codeToHtml(safeText, {
             lang: matchedLanguage,
             theme: 'lobe-theme',
           });
@@ -216,7 +222,7 @@ export const useHighlight = (
           highlightCache.delete(cacheKey);
         }
       });
-  }, [cacheKey, safeText, matchedLanguage, builtinTheme, transformers, customThemes]);
+  }, [cacheKey, safeText, matchedLanguage, builtinTheme, transformers]);
 
   return data || '';
 };
diff --git a/src/hooks/useStreamHighlight.ts b/src/hooks/useStreamHighlight.ts
index 89be9e8a7..3b0668e27 100644
--- a/src/hooks/useStreamHighlight.ts
+++ b/src/hooks/useStreamHighlight.ts
@@ -2,12 +2,16 @@
 
 import { type CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { type BuiltinTheme, type ThemedToken } from 'shiki';
-import { ShikiStreamTokenizer } from 'shiki-stream';
 
 import { getCodeLanguageByInput } from '@/Highlighter/const';
 import lobeTheme from '@/Highlighter/theme/lobe-theme';
 
-import { shikiModulePromise, type StreamingHighlightResult } from './useHighlight';
+import {
+  ensureLanguage,
+  ensureTheme,
+  getOrCreateHighlighter,
+  type StreamingHighlightResult,
+} from './useHighlight';
 
 type StreamingOptions = {
   customThemes?: Record<string, any>;
@@ -74,7 +78,7 @@ const useStreamingHighlighter = (
 ): StreamingHighlightResult | undefined => {
   const { customThemes, enabled, language, theme } = options;
   const [result, setResult] = useState<StreamingHighlightResult>();
-  const tokenizerRef = useRef<ShikiStreamTokenizer | null>(null);
+  const tokenizerRef = useRef<any>(null);
   const previousTextRef = useRef('');
   const safeText = text ?? '';
   const latestTextRef = useRef(safeText);
@@ -234,33 +238,32 @@ const useStreamingHighlighter = (
     let cancelled = false;
 
     (async () => {
-      const mod = await shikiModulePromise;
-      if (!mod || cancelled) return;
+      const highlighter = await getOrCreateHighlighter();
+      if (!highlighter || cancelled) return;
 
       try {
-        // Load custom theme if using slack-dark or slack-ochin
-        let themesToLoad: any[] = [theme];
+        // Load language and theme on demand
+        const effectiveLang = language || 'plaintext';
+        await ensureLanguage(highlighter, effectiveLang);
+
+        // Load custom theme if lobe-theme
         if (customThemes && theme === 'lobe-theme') {
           const customTheme = customThemes[theme];
-          if (customTheme) {
-            themesToLoad = [customTheme as any];
+          if (customTheme && !highlighter.getLoadedThemes().includes(theme)) {
+            await highlighter.loadTheme(customTheme as any);
           }
+        } else {
+          await ensureTheme(highlighter, theme);
         }
 
-        // Only load the specific language and theme needed
-        // getSingletonHighlighter will cache the instance internally
-        const highlighter = await mod.getSingletonHighlighter({
-          langs: language ? [language] : ['plaintext'],
-          themes: themesToLoad,
-        });
-
-        if (!highlighter || cancelled) return;
+        if (cancelled) return;
 
         // Only create new tokenizer if key changed
         if (highlighterKeyRef.current !== currentKey) {
           // Clear old tokenizer
           tokenizerRef.current?.clear();
 
+          const { ShikiStreamTokenizer } = await import('shiki-stream');
           const tokenizer = new ShikiStreamTokenizer({
             highlighter,
             lang: language,
diff --git a/src/index.ts b/src/index.ts
index 4bf296e1c..efec3a96a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -149,6 +149,11 @@ export {
   SyntaxHighlighter,
   type SyntaxHighlighterProps,
 } from './Highlighter';
+export {
+  SyntaxHighlighterMinimal,
+  type SyntaxHighlighterMinimalProps,
+  useMinimalHighlight,
+} from './HighlighterMinimal';
 export { preprocessMarkdownContent } from './hooks/useMarkdown/utils';
 export { combineKeys, default as Hotkey, type HotkeyProps, KeyMapEnum } from './Hotkey';
 export { default as HotkeyInput, type HotkeyInputProps } from './HotkeyInput';