Code

A code block component (self-developed regex token highlighting, no third-party highlighting engine) supporting basic coloring for common languages, line numbers, and a copy button.

JavaScript

JavaScript highlighting

Example

Basic coloring for keywords / strings / comments / numbers / functions / operators.

TypeScript

TypeScript highlighting

Example

HTML

HTML highlighting

Example

Tag names and attribute names are colored separately.

CSS

CSS highlighting

Example

JSON

JSON highlighting

Example

Line Numbers + Copy

Show line numbers

Example

show-line-number displays the line number column; the copy button in the top-right corner (disable with copyable="false") copies the source on click and emits the oas-copy event.

Copy Button Toggle

copyable copy button

Example

copyable controls the top-right copy button (default true): setting it to false hides the button; clicking the button writes the source to the clipboard and briefly shows "已复制".

Unknown Language

Unknown language rendered as plain text

Example

When the language is unknown, the content is rendered as plain text (escaped) without errors.

Inline Code (inline)

inline renders inline code (monospace with a light background box, non-block, no line breaks — for code snippets inside prose):

Inline code

Declare a constant with and print it with .

Example

Word Wrap (word-wrap)

With word-wrap, long code wraps instead of scrolling horizontally:

Long code wrapping

Example

Trimming (trim)

trim defaults to true (strips leading/trailing whitespace); trim="false" preserves it:

trim comparison

Example

Inline Size (size)

size has four tiers (xs/small/medium/large — font-size tiers in inline context):

Inline sizes

Example

Inline Variant (variant)

variant has four styles (subtle light background by default / outline bordered / plain text only / solid filled):

Inline variants

Example

Inline Color (color)

color accepts 11 preset color names (auto-adapting to light/dark themes) or any CSS color value (takes effect directly, overriding presets and the default). Controls the text color in inline context:

Inline colors

Example

Font Size

Font size defaults to 0.875× the outer context (0.875em); override with the CSS variable --oas-code-font.

API

Attributes

Attribute	Description	Type	Default
code	Raw source code	string	—
color	Inline text color: accepts 11 preset names (magenta / red / volcano / orange / gold / lime / green / cyan / blue / geekblue / purple, mapped to --oas-preset-*-text tokens) or any CSS color value	string	—
copyable	Show the copy button	string	true
inline	Inline code mode: renders as a monospace light-background box for code snippets inside prose	boolean	—
language	Language: js/ts/html/css/json; unknown falls back to plain text	string	—
show-line-number	Show the line number column	boolean	—
size	Inline font-size tier: xs / small / medium (default) / large; invalid values fall back to medium with a warning	—	—
trim	Strip leading/trailing whitespace (default true; trim="false" preserves it)	string	true
variant	Inline style: subtle (default light background) / outline (bordered) / plain (text only) / solid (filled); invalid values fall back to subtle with a warning	—	—
word-wrap	Wrap long code instead of horizontal scrolling	boolean	—

Events

Event	Description
oas-copy	Copy succeeded, detail: { text }
oas-copy-error	Copy failed, detail: { text }

Engine Choice (Architecture Decision)

Self-developed regex token highlighting, no third-party highlighting library:

1. Zero-dependency core selling point: zero third-party runtime dependencies; self-developed regex highlighting introduces no dependencies.
2. Covers basic coloring of mainstream languages: keyword/string/comment/number/function/tag/attribute coloring for js/ts/html/css/json covers most documentation scenarios; precise syntax-level highlighting (multi-line state machines, context awareness) is a future enhancement to be re-evaluated.
3. Safety: HTML is escaped before highlighting to prevent injection; unknown languages render as plain text without errors.
4. Implemented as a single-pass combined regex (mutually exclusive capture groups) with one replace, avoiding a second pass that could break escaped entities.