Highlighted code

Monochrome syntax highlighting with lazy grammars, exact-source copy and download, and a scrollable code region.

Preview

typescript
const review = { owner: 'Legal', status: 'ready' };

In action

Readable source

typescript
// Keep the original source available for review.
const review = {
  owner: "Legal",
  status: "draft",
};

export default review;

Copy and download use the displayed source. Highlighting updates when an equal-length value changes.

When to use

Use it for

  • Source returned by an assistant or supplied by an application that benefits from syntax structure.
  • Pass streaming=true for unfinished blocks. Highlighting begins when the block settles.
  • Set filename for code downloads. Copy and download always use the original supplied code.
  • Unknown languages, large source, and unavailable grammars remain readable plain text.

Avoid

  • Expecting this component to execute code or to fetch a source file.
  • Applying colored syntax themes outside the monochrome design system.

Install

React package

npm install @noorddev/vlak-react shiki@^3.19.0

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { HighlightedCode } from "@noorddev/vlak-react/components/highlighted-code";

Per-component imports are available at @noorddev/vlak-react/components/highlighted-code.

Copy the source

npx @noorddev/vlak-cli add highlighted-code

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/highlighted-code.json

Installs the same source through the shadcn CLI.

React

import { HighlightedCode } from "@noorddev/vlak-react/components/highlighted-code";

<HighlightedCode code={"const ready = true;"} language="typescript" filename="review.ts" lineNumbers />

See the integration example to compose these components with your application's model and data.

Props

HighlightedCode

Optional Shiki renderer with lazy grammars, monochrome tokens, and exact-source copy.

PropTypeDefaultDescription
coderequiredstring
languagestring"text"
streamingbooleanfalseKeep an unfinished source block readable without repeatedly highlighting it.
lineNumbersbooleanfalse
maxHeightnumber400Maximum scrollable source height in pixels.
copyablebooleantrue
downloadablebooleantrue
filenamestring"code.txt"
onCopyCode(code: string) => void | Promise<void>

Also accepts HTMLAttributes<HTMLElement>.

The ref reaches HTMLElement.

Keyboard

KeysDoes
TabReaches copy, download, and the scrollable source region.
Enter, SpaceCopies or downloads the source through the focused button.

Accessibility

  • Source is rendered as escaped React text, including highlighted tokens. Decorative line numbers do not enter the accessible text.
  • Copy feedback appears only after the clipboard request resolves. Failure remains visible and can be retried.
  • A 44px target and visible focus outline support keyboard use. The source region is named and scrollable.
  • Highlighting is lazy, has bounded full-source caching, and ignores stale results after content changes. Native figure attributes and its ref pass through.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<figure class="rs-highlighted-code"><figcaption class="rs-highlighted-code-header"><span class="rs-highlighted-code-language">typescript</span></figcaption><pre class="rs-highlighted-code-pre" tabindex="0" role="group" aria-label="typescript source"><code>const ready = true;</code></pre></figure>

Classes

.rs-highlighted-code.rs-highlighted-code-header.rs-highlighted-code-language.rs-highlighted-code-actions.rs-highlighted-code-action.rs-highlighted-code-icon.rs-highlighted-code-pre.rs-highlighted-code-line.rs-highlighted-code-number.rs-highlighted-code-status.rs-highlighted-code-token.rs-highlighted-code-muted.rs-highlighted-code-bold.rs-highlighted-code-italic

Depends on

Button

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas