CodeHighlighter

A code block with syntax colors, the language name and a copy button, for code in a chat reply or a docs page.

Pass the code as children and its language as lang to color it, with the language name and a copy button above.

Set lang to any Prism language name, like bash for a shell command or json for a config file.

Set header to false to show the code alone, or pass a node to replace the language name and copy button.

Pass header a node to replace the language bar with your own, like a file name and run or share buttons.

The component inside real screens, with the components it usually sits beside.

An assistant reply in a Bubble that answers with a code block the user can copy.

A code review thread where an assistant replies to a comment with a diff of the fix and a button to apply it.

An API reference card for one endpoint, with tabs that switch the request example between cURL, JavaScript and Python.

A chat where the user attaches package.json and the assistant answers with a test config file to download.

On This Page