starlight-codeblocks on Astro

This is a minimal Astro site that does not use Starlight. It adds the code block features of starlight-codeblocks with codeblocks() from starlight-codeblocks/astro. To set up your own site, read Astro setup in the starlight-codeblocks documentation.

Each section below shows one feature.

Focus and line states

import express from 'express';

const app = express();
Warning:app.listen(3000);Warning Read the port from the environment.

Annotations and inline callouts

services:
  web:
    image: nginx:1.271Pin the tag, so that a rebuild gets the same image.
Host port first, then the container port.
    ports:
      - '8080:80'

Pin the tag, so that a rebuild gets the same image.

Code tabs

npm install starlight-codeblocks

Inline code

Call fetch(url) and check res.ok before you read the body. Prose with colons, such as a 16:9 ratio, stays as it is.

Fill-in placeholders

curl -H "Authorization: Bearer YOUR_TOKEN" https://api.example.com/me

Run code

const words = ['code', 'blocks', 'in', 'astro'];
console.log(words.map((word) => word.toUpperCase()).join(' '));

Code walkthrough

<CodeWalkthrough> works in MDX pages on a site without Starlight too.

import express from 'express';

const app = express();

Step 1 of 3

import express from 'express';

const app = express();
app.use(express.json());

Step 2 of 3

import express from 'express';

const app = express();
app.use(express.json());
app.listen(3000);

Step 3 of 3