Files
wireguard-ui/src/components/twui/(partials)/CodeBlockHastNode.tsx
T
tbenandClaude Opus 5.5 548a934008 Add syntax highlighting and light/dark themes to twui CodeBlock
- Highlight string children with refractor (Prism) when `language` is
  set, rendered as React token spans; add ini/bash/json/yaml/ts support
- Add `theme` prop (auto | light | dark); auto follows the `.dark` class.
  Palettes are `--twui-code-*` CSS variables (GitHub Light/Dark, all
  tokens WCAG AA) so custom themes need no component changes
- Fix layout: real padding, singleBlock copy button no longer covers
  the code, clipped rounded corners, wrapperProps.style honoured,
  long tokens wrap
- MDX helpers take `codeTheme` and no longer force a black background
- Highlight WireGuard config blocks as ini

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-16 06:44:43 +01:00

33 lines
684 B
TypeScript

import type { RootContent } from "hast";
type Props = {
node: RootContent;
};
/**
* # Render one node of a refractor hast tree
*/
export default function CodeBlockHastNode({ node }: Props) {
if (node.type === "text") {
return node.value;
}
if (node.type !== "element") {
return null;
}
const className = node.properties?.className;
return (
<span
className={
Array.isArray(className) ? className.join(" ") : undefined
}
>
{node.children.map((child, index) => (
<CodeBlockHastNode key={index} node={child} />
))}
</span>
);
}