import type { AppThemeAppearance } from "@/lib/appTheme"; export type SqlHighlighter = (content: string, appearance?: AppThemeAppearance) => string; interface ShikiSqlHighlighterOptions { appearance: () => AppThemeAppearance; } const SHIKI_THEMES = { dark: "github-dark", light: "github-light", } as const; type ShikiHighlighter = Awaited>; let highlighterPromise: Promise | undefined; export async function createShikiSqlHighlighter(options: ShikiSqlHighlighterOptions): Promise { const highlighter = await getShikiSqlHighlighter(); return (content, appearance = options.appearance()) => highlighter.codeToHtml(content, { lang: "sql", structure: "inline", theme: SHIKI_THEMES[appearance], }); } function getShikiSqlHighlighter(): Promise { highlighterPromise ??= loadShikiSqlHighlighter(); return highlighterPromise; } async function loadShikiSqlHighlighter(): Promise { const [{ createHighlighterCore }, { createJavaScriptRegexEngine }, githubDark, githubLight, sql] = await Promise.all([ import("shiki/core"), import("shiki/engine/javascript"), import("shiki/themes/github-dark.mjs"), import("shiki/themes/github-light.mjs"), import("shiki/langs/sql.mjs"), ]); return createHighlighterCore({ engine: createJavaScriptRegexEngine(), langs: [sql.default], themes: [githubDark.default, githubLight.default], }); }