mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Anthony Lio
7fb2e8cd42
## What kind of change does this PR introduce? bug fix alternative to #50492 ## What is the current behavior? [#50239](https://github.com/supabase/supabase/pull/50239) introduced repeated shiki grammar registration. duplicate injection rules accumulate between code blocks, slowing later tutorials enough to hit the 60-second build timeout ## What is the new behavior? - reuses one highlighter with all languages loaded once - restores previous highlighting approach + startup cost while keeping the page-size savings replay | before #50239 | after #50239 | this pr -- | -- | -- | -- cold, including initialization | 2.99 s | 6.96 s | 2.94 s warm | 0.37 s | 5.90 s | 0.36 s <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Enhancements * Code blocks now preload syntax highlighting for all supported bundled languages, including SQL, Markdown, and TypeScript. * Highlighting uses a shared configuration and theme for consistent rendering across code blocks. * Concurrent code block renders share a single highlighter initialization. * Language handling and syntax-highlighted output are more consistent across supported, unsupported, aliased, and plain-text code blocks. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ali Waseem <waseema393@gmail.com>
21 lines
682 B
TypeScript
21 lines
682 B
TypeScript
import { bundledLanguages, createHighlighter, type BundledLanguage } from 'shiki'
|
|
|
|
import theme from './supabase-2.json' with { type: 'json' }
|
|
|
|
let highlighterPromise: ReturnType<typeof createHighlighter> | undefined
|
|
|
|
export async function highlightCode(code: string, lang: BundledLanguage | null) {
|
|
// init all grammars once so later blocks stay fast
|
|
const highlighter = await (highlighterPromise ??= createHighlighter({
|
|
themes: [structuredClone(theme)],
|
|
langs: Object.keys(bundledLanguages),
|
|
}))
|
|
|
|
return highlighter.codeToTokens(code, {
|
|
lang: lang || undefined,
|
|
theme: 'Supabase Theme',
|
|
tokenizeTimeLimit: 0,
|
|
tokenizeMaxLineLength: 100_000,
|
|
})
|
|
}
|