CodeBlock

Render plain source or build-time syntax-highlighted output

CodeBlock provides a language label, horizontal scrolling, and copy behavior; the header and code body have no separator. Light mode uses GitHub Light and dark mode uses One Dark Pro. The code prop uses lightweight built-in token coloring; full syntax highlighting belongs in the MDX, Markdown, or host build pipeline, so the component does not load Shiki in the browser.

agent.ts

import { Agent } from "@downcity/agent";const agent = new Agent({  id: "repo-helper",  instruction: "You are a reliable project assistant.",});

Loading preview…

Build tooling can also pass highlighted children, data-raw, and data-language directly to the component.