| 1 | import { getSharedHighlighter } from "@pierre/diffs"; |
| 2 | import { toHtml } from "hast-util-to-html"; |
| 3 | import { renderToStaticMarkup } from "react-dom/server"; |
| 4 | import { describe, expect, it } from "vite-plus/test"; |
| 5 | |
| 6 | import { createIncrementalHighlightedDocument } from "../../lib/incrementalHighlighting"; |
| 7 | import { HighlightedCodeLines } from "./HighlightedCodeLines"; |
| 8 | |
| 9 | describe("highlighted code lines", () => { |
| 10 | it("preserves Shiki HTML, including colors, escaping, whitespace, and blank lines", async () => { |
| 11 | const highlighter = await getSharedHighlighter({ |
| 12 | langs: ["typescript"], |
| 13 | themes: ["pierre-dark", "pierre-light"], |
| 14 | preferredHighlighter: "shiki-wasm", |
| 15 | }); |
| 16 | for (const theme of ["pierre-dark", "pierre-light"] as const) { |
| 17 | const highlight = createIncrementalHighlightedDocument(highlighter, "typescript", theme); |
| 18 | const code = |
| 19 | 'const html = "<img src=x onerror=alert(1)>";\n\n/* multi\nline */\n\tconst x = 1;\n'; |
| 20 | for (let end = 0; end <= code.length; end++) { |
| 21 | const root = highlight(code.slice(0, end)); |
| 22 | expect(renderToStaticMarkup(<HighlightedCodeLines root={root} />)).toBe(toHtml(root)); |
| 23 | } |
| 24 | } |
| 25 | }); |
| 26 | }); |