| 21 | |
| 22 | // Helper to highlight text and extract lines |
| 23 | const highlightAndExtractLines = (text: string): ReactNode[] => { |
| 24 | const textLines = text.split("\n") |
| 25 | |
| 26 | if (!text.trim()) { |
| 27 | return textLines.map((line) => line || "") |
| 28 | } |
| 29 | |
| 30 | try { |
| 31 | // Use Shiki's line transformer to get per-line highlighting |
| 32 | const hast: any = highlighter.codeToHast(text, { |
| 33 | lang, |
| 34 | theme: shikiTheme, |
| 35 | transformers: [ |
| 36 | { |
| 37 | pre(node: any) { |
| 38 | node.properties.style = "padding:0;margin:0;background:none;" |
| 39 | return node |
| 40 | }, |
| 41 | code(node: any) { |
| 42 | node.properties.class = `hljs language-${lang}` |
| 43 | return node |
| 44 | }, |
| 45 | line(node: any, line: number) { |
| 46 | // Add a line marker to help with extraction |
| 47 | node.properties["data-line"] = line |
| 48 | return node |
| 49 | }, |
| 50 | }, |
| 51 | ], |
| 52 | }) |
| 53 | |
| 54 | // Extract the <code> element's children (which should be line elements) |
| 55 | const codeEl = hast?.children?.[0]?.children?.[0] |
| 56 | if (!codeEl || !codeEl.children) { |
| 57 | return textLines.map((line) => line || "") |
| 58 | } |
| 59 | |
| 60 | // Convert each line element to a ReactNode |
| 61 | const highlightedLines: ReactNode[] = [] |
| 62 | |
| 63 | for (const lineNode of codeEl.children) { |
| 64 | if (lineNode.tagName === "span" && lineNode.properties?.className?.includes("line")) { |
| 65 | // This is a line span from Shiki |
| 66 | const reactNode = toJsxRuntime( |
| 67 | { type: "element", tagName: "span", properties: {}, children: lineNode.children || [] }, |
| 68 | { Fragment, jsx, jsxs }, |
| 69 | ) |
| 70 | highlightedLines.push(reactNode) |
| 71 | } |
| 72 | } |
| 73 | |
| 74 | // If we didn't get the expected structure, fall back to simple approach |
| 75 | if (highlightedLines.length !== textLines.length) { |
| 76 | // For each line, highlight it individually (fallback) |
| 77 | return textLines.map((line) => { |
| 78 | if (!line.trim()) return line |
| 79 | |
| 80 | try { |