feat: optimize web bundle with custom minimal Shiki highlighter

Replaces react-shiki with a custom minimal Shiki highlighter to significantly reduce bundle size. Only loads 29 common languages and 2 themes (github-light/dark), using the JavaScript RegExp engine instead of WASM.

- Reduced web bundle from 5.8MB to 2.5MB (57% reduction)
- Saves 622KB by avoiding WASM runtime
- Graceful fallback for unsupported languages
- Removed react-shiki dependency
- Added @shikijs/langs, @shikijs/themes, shiki, hast-util-to-jsx-runtime
- Added light mode CSS rules for syntax highlighting
This commit is contained in:
weishu
2025-12-18 15:09:49 +08:00
parent be00343289
commit 3cf66983fc
6 changed files with 192 additions and 46 deletions
+9
View File
@@ -111,6 +111,15 @@ body {
background-color: transparent !important;
}
/* Shiki dual theme colors */
.shiki,
.shiki span {
color: var(--shiki-light) !important;
font-style: var(--shiki-light-font-style) !important;
font-weight: var(--shiki-light-font-weight) !important;
text-decoration: var(--shiki-light-text-decoration) !important;
}
html[data-theme="dark"] .shiki,
html[data-theme="dark"] .shiki span {
color: var(--shiki-dark) !important;