Code Block

A syntax-highlighted block of code with a copy button, used for code in chat answers, tool calls and documents.

Basic

Pass the source as children and a language. The copy button appears in the top-right corner while the pointer is over the block or focus is inside it. It copies plain text and highlighted HTML, so pasting into a document keeps the colors. If the clipboard rejects the copy, a warning toast appears.

const response = await fetch('https://api.tryprofound.com/v1/reports/visibility', {
  method: 'POST',
  headers: { Authorization: `Bearer ${apiKey}` },
  body: JSON.stringify({ categoryId, startDate: '2026-10-01', endDate: '2026-10-31' }),
});

const { data } = await response.json();

Languages

language accepts highlight.js names and common aliases, such as ts, py or sh. Grammars load on demand, so a block shows plain text for a moment before its colors arrive. Without language, the block guesses from the code. It recognizes HTML, JSX, TypeScript, JavaScript, JSON, CSS and shell commands, like the curl command below.

import pandas as pd

mentions = pd.read_csv("answer_engine_mentions.csv")
share = mentions.groupby("engine")["brand_mentioned"].mean()
print(share.sort_values(ascending=False).round(2))
curl -H "Authorization: Bearer $PROFOUND_API_KEY" https://api.tryprofound.com/v1/prompts

Limited height

Long lines scroll sideways. To cap the height of long output, such as a tool call result, pass a class like max-h-60 to preClassName, and the block scrolls vertically too.

{
  "prompt": "What is the best CRM for a startup?",
  "engines": [
    {
      "name": "ChatGPT",
      "mentioned": true,
      "position": 2,
      "citations": [
        "hubspot.com",
        "g2.com"
      ]
    },
    {
      "name": "Perplexity",
      "mentioned": true,
      "position": 1,
      "citations": [
        "techcrunch.com",
        "acme.com"
      ]
    },
    {
      "name": "Gemini",
      "mentioned": false,
      "position": null,
      "citations": [
        "forbes.com"
      ]
    },
    {
      "name": "Copilot",
      "mentioned": true,
      "position": 4,
      "citations": [
        "capterra.com"
      ]
    }
  ],
  "visibilityScore": 0.62
}

Language picker

languagePicker adds a searchable language menu next to the copy button. The block does not store the choice: update language from onLanguageChange.

select engine, count(*) as citations
from citations
where domain = 'acme.com'
group by engine
order by citations desc;

Copy button on its own

CodeBlockCopyButton is the same button, exported separately for text that is not a code block, such as a prompt to paste into another assistant. Unlike inside a code block, it is always visible. It shows a check and the copied label for a moment after a successful copy.

List everything you know about my role, my company, the products we sell and the competitors we track. Write it as short bullet points I can paste into Profound.

Usage

CodeBlockFrame, from the same module, is the block's shell without a code renderer. Use it when another component renders the code, as the document editor does with its editable code blocks, and pass the copy button and language picker as actions.

CodeBlock Properties

childrenRequired
ReactNode

Source code. Strings and numbers are joined; other nodes are ignored.

language
string

Language name or alias, such as typescript, ts, python or py. Detected from the code when omitted.

languagePicker
Omit<CodeBlockLanguagePickerProps, 'language'>

Shows a language menu next to the copy button. Requires onLanguageChange.

copyLabel
string

Accessible label and tooltip of the copy button before copying.

Default: Copy code

copiedLabel
string

Accessible label and tooltip after a successful copy.

Default: Copied

copyFailureMessage
string

Toast message shown when the clipboard rejects the copy.

Default: Failed to copy code. Please try again.

className
string

Additional classes for the outer wrapper.

preClassName
string

Additional classes for the scrolling pre panel, such as max-h-60.

codeClassName
string

Additional classes for the code element.

languagePicker Properties

onLanguageChangeRequired
(language: string) => void

Called with the selected language.

onOpenChange
(open: boolean) => void

Called when the menu opens or closes, for example to start loading grammars.

languages
readonly CodeBlockLanguage[]

Languages offered, each with a value, a label and optional aliases. Defaults to the shared list of 18 languages.

ariaLabel
string

Accessible label of the menu button.

Default: Code language

searchPlaceholder
string

Placeholder of the search field.

Default: Search languages

noResultsLabel
string

Message shown when no language matches the search.

Default: No languages found

className
string

Additional classes for the menu button.

CodeBlockCopyButton Properties

textRequired
string(() => string)

Text to copy, or a function that returns it when clicked.

language
string

Language used to highlight the HTML copy.

copyLabel
string

Accessible label and tooltip before copying.

Default: Copy code

copiedLabel
string

Accessible label and tooltip after a successful copy.

Default: Copied

failureMessage
string

Toast message shown when the clipboard rejects the copy.

Default: Failed to copy code. Please try again.

className
string

Additional classes for the button.

CodeBlockFrame Properties

childrenRequired
ReactNode

Code content rendered inside the pre panel.

actionsRequired
ReactNode

Controls shown in the top-right corner on hover and focus.

className
string

Additional classes for the outer wrapper.

preClassName
string

Additional classes for the pre panel.

actionsProps
HTMLAttributes<HTMLDivElement>

Props for the element around the actions.

preProps
HTMLAttributes<HTMLPreElement>

Props for the pre panel.

renderWrapper
(props: { className: string; children: ReactNode }) => ReactNode

Renders a custom wrapper element instead of the default div, for editor integrations.