Code

Code

The Code renderable formats source content with syntax‑aware styling rules. Specify a language, provide the source content and optionally enable line numbers.

<code
  language="typescript"
  content={source()}
  lineNumbers
/>

Use Tree‑sitter integration to provide semantic styling for supported languages. See the reference section on Tree‑sitter for details.

Code is most effective when paired with ScrollBox: keep the code viewer clipped to a viewport and allow both vertical and horizontal scrolling. This makes it viable for long files and wide diffs in a terminal.

<box flexDirection="row">
  <scrollbox id="code" width={80} height={20} border>
    <code language="typescript" content={source()} lineNumbers />
  </scrollbox>
  <scrollbar targetId="code" />
</box>

Props