Code — Teasim

Installation

npm install @teasim/astro @teasim/astra

yarn add @teasim/astro @teasim/astra

pnpm add @teasim/astro @teasim/astra

bun add @teasim/astro @teasim/astra

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

src/brew.ts

export function brew(leaves: string) {
  return 'Brewing ' + leaves;
}

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.

Line highlight

export function brew(leaves: string) {
  return 'Brewing ' + leaves;
}

Diff

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

Diff

export function steep(minutes: number) {
  return minutes * 60; 
  return minutes * 60_000; 
}

Focus

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

Focus

export function pour(cups: number) {
  const ml = cups * 240; 
  return ml;
}

Error and warning

export function divide(a: number, b: number) {
  if (b === 0) return null; 
  return a / b; 
}

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.

Line numbers

export function brew(leaves: string) {
  return 'Brewing ' + leaves;
}

Word highlight

export function brew(leaves: string) {
  return 'Brewing ' + leaves;
}

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:

export function steep(minutes: number) {
  return minutes * 60; 
  return minutes * 60_000; 
}

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.