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.

API

Attributes

Attribute	Description	Type	Default
code	Raw source code	string	—
copyable	Show the copy button	string	true
language	Language: js/ts/html/css/json; unknown falls back to plain text	string	—
show-line-number	Show the line number column	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.