Components
Syntax Highlight
This documentation is for the preview version of the Dev Portal. If you are not part of the preview program, please refer to the current Dev Portal 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
type SyntaxHighlightProps = {
language?: string;
code?: string;
wrapLines?: boolean;
title?: string;
showCopy?: "hover" | "always" | "never";
showCopyText?: boolean;
children?: string;
showLanguageIndicator?: boolean;
noBackground?: boolean;
className?: string;
};tsUsage
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>tsxResult
for (let i = 0; i < Infinity; i++) {
console.log(i);
}