SyntaxColor, Asgard Docs

Data display

Render syntax-highlighted code.

A themable, syntax-highlighted code viewer powered by a Monarch-compatible tokenizer.

Key features:

Line numbers, indent guides and scope folding
Line highlighting, alternate row coloring and git-diff indicators
Inline diagnostics and margin decorators (breakpoints, warnings)
Word wrap, custom tokenColorMap overrides and code excerpts
Built-in languages: TypeScript, JavaScript, JSON, CSS, HTML, Python

Loading preview…

When to use it

Code samples in docs and blogs
Read-only file / snippet viewers
Diff and review surfaces

Properties

Prop	Type	Default	Description
`code`	`string`	—	Source code to render.
`language`	`MonarchLanguage`	—	Monarch language definition for tokenization (e.g. typescriptLanguage). This is an object, not a string.
`size`	`'small' \| 'normal' \| 'large'`	`'normal'`	Font size of the rendered code.
`showLineNumbers`	`boolean`	`true`	Show the line-number gutter.
`showIndentGuides`	`boolean`	`false`	Draw vertical indent guides.
`showFolding`	`boolean`	`false`	Enable indent-based code folding controls.
`highlightedLines`	`number[]`	—	Line numbers to highlight.
`alternateLineColor`	`boolean`	`false`	Zebra-stripe alternate lines.
`startLineNumber`	`number`	`1`	First line number, useful for code excerpts.
`wordWrap`	`boolean`	`false`	Wrap long lines instead of scrolling horizontally.
`tabSize`	`number`	`4`	Number of spaces a tab renders as.
`maxHeight`	`number \| string`	—	Maximum height before the viewer scrolls.
`trailingLines`	`number`	`0`	Blank lines appended after the code.
`tokenColorMap`	`Record<string, string>`	—	Override individual token colors.

Notes

language is a MonarchLanguage object. Import a built-in (typescriptLanguage, jsonLanguage, …) or supply your own definition.
For prose with fenced code blocks, MarkdownRenderer wraps SyntaxColor for you, no language object needed.
Use startLineNumber + highlightedLines to render and emphasize an excerpt from a larger file.

Presets