Code Highlighting Examples with Shiki

Shiki powers our Markdown code highlighting. Use fenced blocks with a language tag.

JavaScript

export function greet(name) {
  const msg = `Hello, ${name}!`;
  console.log(msg);
  return msg;
}

TypeScript

interface Task {
  id: string;
  done?: boolean;
}

const add = (a: number, b: number): number => a + b;

Bash

# Install dependencies
npm ci

# Build the site
npm run build

# Preview locally via Cloudflare Pages
npm run preview

YAML (CI pipeline)

name: ci
on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build

JSON

{
  "name": "my-astro-app",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  }
}