Shiki Syntax Highlighting Test

Syntax Highlighting Test

This article tests Shiki syntax highlighting with various languages.

JavaScript

const greeting = 'Hello, World!';
console.log(greeting);

function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);

TypeScript

interface User {
id: string;
name: string;
email: string;
createdAt: Date;
}

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

Bash

#!/bin/bash
set -e

echo "Deploying to production..."
npm run build
wrangler deploy
echo "Done!"

JSON

{
"name": "pub-cogley",
"version": "1.2.0",
"dependencies": {
"hono": "^4.0.0",
"drizzle-orm": "^0.30.0"
}
}

Python

def quicksort(arr):
if len(arr) <= 1:
return arr
pivot = arr[len(arr) // 2]
left = [x for x in arr if x < pivot]
middle = [x for x in arr if x == pivot]
right = [x for x in arr if x > pivot]
return quicksort(left) + middle + quicksort(right)

print(quicksort([3, 6, 8, 10, 1, 2, 1]))

SQL

SELECT
p.id,
p.title,
p.created_at,
COUNT(c.id) as comment_count
FROM posts p
LEFT JOIN comments c ON c.post_id = p.id
WHERE p.status = 'published'
GROUP BY p.id
ORDER BY p.created_at DESC
LIMIT 10;

Svelte


let count = $state(0);
let doubled = $derived(count * 2);


count++}>
Count: {count} (doubled: {doubled})



button {
padding: 1rem 2rem;
background: var(--color-accent);
color: white;
border: none;
border-radius: 0.5rem;
}


That's all the syntax highlighting examples!