Syntax Highlight

It is used to highlight code blocks in your content.

Types

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;
};
ts

Usage

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

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

Result

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