Unified · Split
| @@ -87,28 +87,20 @@ function createHighlightCacheKey(code: string, language: string, themeName: Diff · 86 unmodified lines | |||
| 87 | return `${fnv1a32(code).toString(36)}:${code.length}:${language}:${themeName}`; | 87 | return `${fnv1a32(code).toString(36)}:${code.length}:${language}:${themeName}`; |
| 88 | } | 88 | } |
| 89 | 89 | ||
| 90 | function createHighlighterPromiseKey(language: string, themeName: DiffThemeName): string { | ||
| 91 | return `${language}:${themeName}`; | ||
| 92 | } | ||
| 93 | |||
| 94 | function estimateHighlightedSize(html: string, code: string): number { | 90 | function estimateHighlightedSize(html: string, code: string): number { |
| 95 | return Math.max(html.length * 2, code.length * 3); | 91 | return Math.max(html.length * 2, code.length * 3); |
| 96 | } | 92 | } |
| 97 | 93 | ||
| 98 | function getHighlighterPromise( | 94 | function getHighlighterPromise(language: string): Promise<DiffsHighlighter> { |
| 99 | language: string, | 95 | const cached = highlighterPromiseCache.get(language); |
| 100 | themeName: DiffThemeName, | ||
| 101 | ): Promise<DiffsHighlighter> { | ||
| 102 | const cacheKey = createHighlighterPromiseKey(language, themeName); | ||
| 103 | const cached = highlighterPromiseCache.get(cacheKey); | ||
| 104 | if (cached) return cached; | 96 | if (cached) return cached; |
| 105 | 97 | ||
| 106 | const promise = getSharedHighlighter({ | 98 | const promise = getSharedHighlighter({ |
| 107 | themes: [themeName], | 99 | themes: ["pierre-dark", "pierre-light"], |
| 108 | langs: [language as SupportedLanguages], | 100 | langs: [language as SupportedLanguages], |
| 109 | preferredHighlighter: "shiki-js", | 101 | preferredHighlighter: "shiki-js", |
| 110 | }); | 102 | }); |
| 111 | highlighterPromiseCache.set(cacheKey, promise); | 103 | highlighterPromiseCache.set(language, promise); |
| 112 | return promise; | 104 | return promise; |
| 113 | } | 105 | } |
| 114 | 106 | ||
| @@ -186,7 +178,7 @@ function SuspenseShikiCodeBlock({ · 71 unmodified lines | |||
| 186 | ); | 178 | ); |
| 187 | } | 179 | } |
| 188 | 180 | ||
| 189 | const highlighter = use(getHighlighterPromise(language, themeName)); | 181 | const highlighter = use(getHighlighterPromise(language)); |
| 190 | const highlightedHtml = useMemo( | 182 | const highlightedHtml = useMemo( |
| 191 | () => highlighter.codeToHtml(code, { lang: language, theme: themeName }), | 183 | () => highlighter.codeToHtml(code, { lang: language, theme: themeName }), |
| 192 | [code, highlighter, language, themeName], | 184 | [code, highlighter, language, themeName], |