Tokens

Renders syntax highlighted tokens for the CodeBlock component.

API Reference

TokensProps

TokensProps
Properties

children

string | Promise<string>

Code string to highlight and render as tokens.

allowErrors

boolean | string

Whether to allow errors to be displayed.

showErrors

boolean

Whether to show errors.

shouldAnalyze

boolean

Whether or not to analyze the source code for type errors and provide quick information on hover.

shouldFormat

boolean

Whether or not to format the source code using prettier if installed.

language

Languages

Language to use for syntax highlighting.

css

{ token?: CSSObject; popover?: CSSObject; }

CSS style object to apply to the tokens and popover elements.

token

CSSObject

popover

CSSObject

className

{ token?: string; popover?: string; }

Class names to apply to the tokens and popover elements.

token

string

popover

string

style

{ token?: React.CSSProperties; popover?: React.CSSProperties; }

Styles to apply to the tokens and popover elements.

token

React.CSSProperties

popover

React.CSSProperties

renderLine

(line: { children: React.ReactNode; index: number; isLast: boolean; }) => React.ReactNode

Custom render function for each line of tokens.

line *

{ children: React.ReactNode; index: number; isLast: boolean; }

children *

React.ReactNode

index *

number

isLast *

boolean

Tokens

({ children, language: languageProp, allowErrors, showErrors, shouldAnalyze: shouldAnalyzeProp, shouldFormat, renderLine, css: cssProp, className, style, }: TokensProps) => Promise<React.JSX.Element>

Renders syntax highlighted tokens for the CodeBlock component.

Parameters
TokensProps
Returns
Promise<Element>
Last updated