marcopanandClaude Sonnet 4.6
954f701c3f
TDD: SqlViewer renders collapsible CTE blocks with name/field-count/ test-status badges, shiki-highlighted SQL body (dangerouslySetInnerHTML), per-field comments, and a vertical/horizontal layout toggle. highlight.ts wraps shiki as a lazy singleton; tests mock it for determinism (pattern mirrors mermaid.ts). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
22 lines
602 B
TypeScript
22 lines
602 B
TypeScript
import type { Highlighter } from "shiki";
|
|
|
|
let _highlighter: Highlighter | null = null;
|
|
|
|
async function getHighlighter(): Promise<Highlighter> {
|
|
if (_highlighter) return _highlighter;
|
|
const { createHighlighter } = await import("shiki");
|
|
_highlighter = await createHighlighter({
|
|
themes: ["github-light", "github-dark"],
|
|
langs: ["sql"],
|
|
});
|
|
return _highlighter;
|
|
}
|
|
|
|
export async function highlightSql(code: string): Promise<string> {
|
|
const hl = await getHighlighter();
|
|
return hl.codeToHtml(code, {
|
|
lang: "sql",
|
|
themes: { light: "github-light", dark: "github-dark" },
|
|
});
|
|
}
|