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 "Copied".

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.

Line Highlight (highlight-lines)

highlight-lines highlights lines using the "1,3-5" range syntax (1-based, comma-separated points or inclusive ranges; whitespace ignored, invalid fragments skipped):

Line highlight

Example

Line Focus (focus-lines)

focus-lines focuses the given lines and dims the rest by blending them toward the theme text color (color-mix, not opacity) — handy for walking through key code:

Line focus

Example

Diff Mode (diff)

With diff, lines are colored by their first character: + lines green (added), - lines red (removed):

Diff coloring

Example

Content Folding (max-rows)

max-rows caps the visible lines and shows an expand/collapse tail row when exceeded (0 means unlimited, invalid values ignored):

max-rows folding

Example

API

oas-code

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
diff	Diff mode: colors lines by leading +/- (semantic color tokens)	boolean	—
focus-lines	Line focus: focused lines stay, the rest dim	string	—
highlight-lines	Line highlight: "1,3-5" range syntax for highlighted lines (1-based)	string	—
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	—
max-rows	Max visible lines; overflow folds with an expand/collapse tail row (0 = unlimited)	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	string	—
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 }

CSS Variables

CSS Variable	Default
--oas-code-color	var(--oas-color-text-primary)
--oas-code-focus-dim-strength	58%
--oas-code-font	0.875em
--oas-code-highlight-bg	color-mix(in srgb, var(--oas-color-primary) 8%, transparent)
--oas-code-on-color	var(--oas-color-bg)