# 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

<DemoBlock title="JavaScript highlighting">
  <div style="width: 100%">
    <oas-code language="js" code='const add = (a, b) => {
  return a + b // sum
}
console.log(add(1, 2))'></oas-code>
  </div>
</DemoBlock>

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

## TypeScript

<DemoBlock title="TypeScript highlighting">
  <div style="width: 100%">
    <oas-code language="ts" code='interface User {
  id: number
  name: string
}
const user: User = { id: 1, name: "Alice" }'></oas-code>
  </div>
</DemoBlock>

## HTML

<DemoBlock title="HTML highlighting">
  <div style="width: 100%">
    <oas-code language="html" code='<div class="card">
  <!-- Card title -->
  <h2>Hello</h2>
</div>'></oas-code>
  </div>
</DemoBlock>

Tag names and attribute names are colored separately.

## CSS

<DemoBlock title="CSS highlighting">
  <div style="width: 100%">
    <oas-code language="css" code='.card {
  /* Rounded card */
  border-radius: 8px;
  background: #fff;
}'></oas-code>
  </div>
</DemoBlock>

## JSON

<DemoBlock title="JSON highlighting">
  <div style="width: 100%">
    <oas-code language="json" code='{
  "name": "oas-ui",
  "version": 1.6,
  "zeroDep": true
}'></oas-code>
  </div>
</DemoBlock>

## Line Numbers + Copy

<DemoBlock title="Show line numbers">
  <div style="width: 100%">
    <oas-code language="js" show-line-number code='function fib(n) {
  if (n <= 1) return n
  return fib(n - 1) + fib(n - 2)
}'></oas-code>
  </div>
</DemoBlock>

`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

<DemoBlock title="copyable copy button">
  <div style="width: 100%">
    <oas-code language="js" code='console.log("Copy button shown by default")'></oas-code>
    <oas-code language="js" copyable="false" code='console.log("copyable=false hides the copy button")' style="margin-top: var(--oas-space-3)"></oas-code>
  </div>
</DemoBlock>

`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

<DemoBlock title="Unknown language rendered as plain text">
  <div style="width: 100%">
    <oas-code language="unknown-lang" code='This is plain text without any highlighting.'></oas-code>
  </div>
</DemoBlock>

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):

<DemoBlock title="Inline code">
  <p>Declare a constant with <oas-code inline language="js" code='const a = 1'></oas-code> and print it with <oas-code inline language="js" code='console.log(a)'></oas-code>.</p>
</DemoBlock>

## Word Wrap (word-wrap)

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

<DemoBlock title="Long code wrapping">
  <div style="width: 100%; max-width: 400px;">
    <oas-code language="js" word-wrap code='const veryLongVariableName = someFunctionWithAVeryLongName(argumentOne, argumentTwo, argumentThree, argumentFour, argumentFive)'></oas-code>
  </div>
</DemoBlock>

## Trimming (trim)

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

<DemoBlock title="trim comparison">
  <oas-code language="js" code='\n  const a = 1\n  '></oas-code>
  <oas-code language="js" trim="false" code='\n  const a = 1\n  '></oas-code>
</DemoBlock>

## Inline Size (size)

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

<DemoBlock title="Inline sizes">
  <oas-code inline size="xs" language="js" code='const a = 1'></oas-code>
  <oas-code inline size="small" language="js" code='const a = 1'></oas-code>
  <oas-code inline language="js" code='const a = 1'></oas-code>
  <oas-code inline size="large" language="js" code='const a = 1'></oas-code>
</DemoBlock>

## Inline Variant (variant)

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

<DemoBlock title="Inline variants">
  <oas-code inline language="js" code='const a = 1'></oas-code>
  <oas-code inline variant="outline" language="js" code='const a = 1'></oas-code>
  <oas-code inline variant="plain" language="js" code='const a = 1'></oas-code>
  <oas-code inline variant="solid" language="js" code='const a = 1'></oas-code>
</DemoBlock>

## 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:

<DemoBlock title="Inline colors">
  <oas-code inline language="js" color="red" code='const a = 1'></oas-code>
  <oas-code inline language="js" color="green" code='const a = 1'></oas-code>
  <oas-code inline language="js" color="blue" code='const a = 1'></oas-code>
  <oas-code inline language="js" color="cyan" code='const a = 1'></oas-code>
</DemoBlock>

## 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):

<DemoBlock title="Line highlight">
  <div style="width: 100%">
    <oas-code language="js" show-line-number highlight-lines="2,5-6" code='import { ref } from "vue"
const count = ref(0)
function inc() {
  count.value += 1
}
function reset() {
  count.value = 0
}'></oas-code>
  </div>
</DemoBlock>

## 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:

<DemoBlock title="Line focus">
  <div style="width: 100%">
    <oas-code language="js" show-line-number focus-lines="3-4" code='function createUser(name) {
  const id = nextId()
  return { id, name }
}
const user = createUser("Alice")'></oas-code>
  </div>
</DemoBlock>

## Diff Mode (diff)

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

<DemoBlock title="Diff coloring">
  <div style="width: 100%">
    <oas-code language="js" show-line-number diff code='function sum(a, b) {
-  return a - b
+  return a + b
}
const total = sum(1, 2)'></oas-code>
  </div>
</DemoBlock>

## 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):

<DemoBlock title="max-rows folding">
  <div style="width: 100%">
    <oas-code language="js" show-line-number max-rows="3" code='function fib(n) {
  if (n <= 1) return n
  return fib(n - 1) + fib(n - 2)
}
console.log(fib(10))
export { fib }'></oas-code>
  </div>
</DemoBlock>

## 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)` |