Zuplo
Components

Syntax Highlight

This documentation is for the preview version of the Dev Portal. If you are using the legacy developer portal, please refer to the docs.

It is used to highlight code blocks in your content.

You can also use backticks to highlight code blocks in Markdown files, see Code Blocks for more information.

Types

Code(ts)
 
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(tsx)
 
<SyntaxHighlight language="typescript">
  {`for (let i = 0; i < Infinity; i++) {
  console.log(i);
}`}
</SyntaxHighlight>

Result

Code
for (let i = 0; i < Infinity; i++) {
console.log(i);
}
Last modified on
StepperAPI Playground