Markdown

Sanitized GFM + math + syntax-highlighted renderer for streamed assistant output — direct unified/rehype-react rendering through the Preact JSX runtime with remark-gfm/remark-math/remarkCitations, rehype-katex/rehype-highlight, and a MANDATORY rehype-sanitize content pass.

All components · Theme builder · Implementation source

Live preview

Open live markdown preview

Install

Shell

netscript ui:add markdown

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { Markdown } from '@app/components/ui/markdown.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><Markdown>{"## Order updates\n\nYour order is **on its way**."}</Markdown></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`MarkdownProps`	`children`	`string`	No	Raw model / assistant markdown source.
`MarkdownProps`	`streaming`	`boolean`	Yes	Pre-process a possibly-truncated mid-stream chunk before rendering.
`MarkdownProps`	`onCite`	`(index: number) => void`	Yes	Invoked with the citation index when a rendered chip is activated.
`MarkdownProps`	`activeCite`	`number`	Yes	Currently active citation index (highlights its chip).
`MarkdownProps`	`class`	`string`	Yes	Extra class names for the wrapper.
`CitationElementProps`	`index`	`string \| number`	Yes
`CitationElementProps`	`source`	`string`	Yes

Keyboard

No S3 keyboard contract is registered for this item. Native controls retain browser keyboard behavior.

Tokens

No S3 token contract is registered for this item.

CSS custom properties referenced directly: --ns-border, --ns-border-subtle, --ns-border-width, --ns-card, --ns-card-padding, --ns-code-bg, --ns-code-syntax-comment, --ns-code-syntax-function, --ns-code-syntax-keyword, --ns-code-syntax-number, --ns-code-syntax-punctuation, --ns-code-syntax-string, --ns-code-syntax-type, --ns-control-padding-x, --ns-destructive-text, --ns-fg, --ns-focus-ring-offset, --ns-focus-ring-width, --ns-font-heading, --ns-font-mono, --ns-font-sans, --ns-leading-body, --ns-leading-code, --ns-leading-heading, --ns-leading-strong, --ns-leading-title, --ns-marker, --ns-muted-fg, --ns-prose-body-line, --ns-prose-body-size, --ns-prose-code-line, --ns-prose-code-size, --ns-prose-h2-line, --ns-prose-h2-size, --ns-prose-h3-line, --ns-prose-h3-size, --ns-prose-h4-line, --ns-prose-h4-size, --ns-radius-badge, --ns-radius-card, --ns-radius-control, --ns-ring, --ns-space-0-5, --ns-space-1, --ns-space-12, --ns-space-2, --ns-space-3, --ns-space-4, --ns-space-5, --ns-space-7, --ns-space-8, --ns-stack-gap, --ns-studio-prose-body-line, --ns-studio-prose-body-size, --ns-studio-prose-code-line, --ns-studio-prose-code-size, --ns-studio-prose-h1-sm-line, --ns-studio-prose-h1-sm-size, --ns-studio-prose-h2-line, --ns-studio-prose-h2-size, --ns-studio-prose-h2-tracking, --ns-studio-prose-h3-line, --ns-studio-prose-h3-size, --ns-studio-prose-h3-tracking, --ns-studio-prose-h4-line, --ns-studio-prose-h4-size, --ns-studio-prose-lede-line, --ns-studio-prose-lede-size, --ns-studio-prose-measure, --ns-studio-prose-wide, --ns-studio-signal-marker, --ns-studio-signal-underline, --ns-studio-table-head-rule, --ns-studio-table-row-rule, --ns-studio-topbar-rule, --ns-surface, --ns-table-row-rule, --ns-text-body, --ns-text-caption, --ns-text-heading, --ns-text-small, --ns-text-strong, --ns-text-title, --ns-tracking-heading, --ns-tracking-title, --ns-weight-body, --ns-weight-caption, --ns-weight-heading, --ns-weight-label, --ns-weight-strong.

Contract and compatibility

This registry item ships without an S3 entry. Implementation prop documentation is authoritative.