Code blocks

DIL source

<box gap={3}>
  <title>Code belongs in the conversation.</title>
  <CodeBlock language="typescript" editable>
type Result<T> =
  | { ok: true; data: T }
  | { ok: false; error: Error };

const success = <T,>(data: T): Result<T> => ({
  ok: true,
  data,
});
  </CodeBlock>
</box>

Attribute	Contract
language	A supported syntax language, such as typescript, javascript, json, html, css, or python.
editable	Boolean; enables the native text editor. Default false.
Children	Literal source rather than evaluated DIL.

The editor and read-only view share highlighting. Wrap and copy controls have keyboard-accessible tooltips. Editing retains drafts through virtualized unmounts, and copying reports success or denial. Highlighting falls back to plain text for unknown languages or oversized workloads.

Syntax colors can be customized with --dil-code-keyword, --dil-code-string, --dil-code-number, and --dil-code-title. Markdown fences are also supported for literal code; the dedicated CodeBlock provides editing and copy controls.