# Code

## Installation

The highlighting is Astro's own — the family wraps `astro/components/Code.astro`
rather than taking a Shiki dependency, and hands the frame, the header and the
copy button to `CodeBlock`. What a notation *means* is computation, so the
transformer set lives in `@teasim/astra`: `astra()` hands it to
`markdown.shikiConfig` for you, and you pass it to `<Code>` yourself because a
component is not part of that pipeline.

## Preview

```astro
---
import { Code } from "@teasim/astro/code";
import { codeTransformers } from "@teasim/astra/shiki";
---

<Code code={source} lang="ts" title="src/brew.ts" transformers={codeTransformers()} />
```

## Examples

### Line highlight

A range in the metastring marks the lines the paragraph is about.

### Diff

`// [!code ++]` and `// [!code --]` tint the line and sign it in the gutter the
padding already reserves.

### Focus

`// [!code focus]` dims and blurs everything else. Hovering the listing lifts
it again, so the surrounding code is still readable.

### Error and warning

### Line numbers

The gutter is a CSS counter on Shiki's own per-line spans, so it stays in step
with whatever else a transformer added or removed.

### Word highlight

### In markdown

`astra()` gives the same set to `markdown.shikiConfig`, so an ordinary fence
reads the same notation with nothing passed in. This one is a plain
` ```ts ` block — the frame around it is `CodeBlock`, which this site maps onto
markdown's `pre` so a fence and a `<Code>` read the same:

```ts
export function steep(minutes: number) {
  return minutes * 60; // [!code --]
  return minutes * 60_000; // [!code ++]
}
```

## API reference

| Prop | Type | What it does |
| --- | --- | --- |
| `code` | `string` | the source to highlight — required |
| `lang` | `string` | any language Shiki bundles; `plaintext` by default |
| `meta` | `string` | the metastring, where a `{2-4}` range or a `/term/` lives |
| `lineNumbers` | `boolean` | turns on the counter gutter |
| `transformers` | `ShikiTransformer[]` | what Shiki runs over the tree — `codeTransformers()` |
| `themes`, `defaultColor` | Shiki's own | GitHub's high-contrast pair with `defaultColor: false` by default |
| `title`, `language`, `copyable`, `copyLabel` | | forwarded to `CodeBlock` |

`codeRecipe` exposes `source` and takes a `numbered` selection.