Syntax Highlight

Add syntax highlighting to your code blocks with customizable styling and features. The component offers extensive customization options including line numbers, copy buttons, language indicators, and custom theming to match your brand. For simpler use cases, you can also use standard Markdown code blocks as described in Code Blocks.

Import

Code
 
import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight";

Types

Code
 
type SyntaxHighlightProps = {
  language?: string;
  code?: string;
  wrapLines?: boolean;
  title?: string;
  showCopy?: "hover" | "always" | "never";
  showCopyText?: boolean;
  children?: string;
  showLanguageIndicator?: boolean;
  noBackground?: boolean;
  className?: string;
  showLineNumbers?: boolean;
};

Usage

You can either use children or code prop to pass the code to the component.

Code
 
<SyntaxHighlight language="typescript">
  {`for (let i = 0; i < Infinity; i++) {
  console.log(i);
}`}
</SyntaxHighlight>

Result

for (let i = 0; i < Infinity; i++) {
  console.log(i);
}