Standalone syntax-highlighted code blocks with Shiki. Use the CodeBlock component when you need to display code outside of markdown content.

JavaScript

// JavaScript example
function greet(name) {
  console.log(`Hello, ${name}!`);
  return { greeting: `Hello, ${name}!` };
}

const result = greet('World');
console.log(result);

TypeScript

// TypeScript example
interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

Svelte (with filename)

Counter.svelte
<script lang="ts">
  import { Button } from '@classic-homes/theme-svelte';

  let count = $state(0);

  function increment() {
    count++;
  }
</script>

<Button onclick={increment}>
  Count: {count}
</Button>

Bash

# Install dependencies
npm install @classic-homes/theme-docs

# Build the project
npm run build

# Start development server
npm run dev

SQL

-- SQL example
SELECT
  u.id,
  u.name,
  COUNT(o.id) as order_count
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
WHERE u.created_at > '2024-01-01'
GROUP BY u.id, u.name
HAVING COUNT(o.id) > 5
ORDER BY order_count DESC;

Light Theme Example

// JavaScript example
function greet(name) {
  console.log(`Hello, ${name}!`);
  return { greeting: `Hello, ${name}!` };
}

const result = greet('World');
console.log(result);