Code Block

CodeBlock shows source code: the language as a label, a copy control, and syntax highlighting. It is the block a model's fenced code becomes inside Response, and it works on its own for any code sample. code is data and language is an id, so both are plain strings. label names the block, and the three copy labels name the copy control in its three states. Pass showCopy={false} and leave the copy labels out to drop the control. bash, css, diff, go, html, java, javascript, json, jsonc, jsx, markdown, python, rust, sql, toml, tsx, typescript, xml and yaml, plus the common aliases (ts, js, sh, shell, zsh, yml, md, py, rs, golang, htm, svg, patch). The case does not matter, and a language- prefix is accepted. A language outside the list, or no language, leaves the code plain. The label still shows the language as written. Code past 100,000 characters stays plain too, because tokenizing runs on the main thread. The first render, including the server render, is the code as plain text. The highlighter and the grammar for the language load on first use, and the code is repainted in place when they arrive. The text never changes, so the layout does not move and the code is readable and copyable the whole time. While the highlight is being made the block carries the loading state (data-loading), which stories and tests wait on. When the code grows (a streaming reply), the block keeps the earlier highlight, appends the new text plain, and re-highlights. It never falls back to plain and back. Tones are painted from Chroma foreground tokens, so one markup serves light and dark and nothing is computed per theme. There are no syntax tokens in Chroma yet, so keywords and links share --color-fg-link, strings and added lines use the success foreground, constants the warning foreground, functions the informative foreground, deleted lines the destructive foreground, and comments and punctuation the subtle foreground. Under forced colors every tone is the system text color. The code never wraps. A line wider than the block scrolls along the inline axis in a focusable region named by label. Code reads left to right whatever the page direction: the code region is a left-to-right run, so lines stay in order and flush left under RTL. The header follows the page direction.