Syntax Highlighting Demo

One of the things I love about Astro is its built-in syntax highlighting powered by Shiki. Let’s test it out with some code in different languages.

JavaScript / TypeScript

A simple debounce utility:

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// Usage
const handleSearch = debounce((query) => {
  console.log(`Searching for: ${query}`);
  fetchResults(query);
}, 300);

And the TypeScript version with generics:

function debounce<T extends (...args: any[]) => any>(
  fn: T,
  delay: number
): (...args: Parameters<T>) => void {
  let timer: ReturnType<typeof setTimeout>;
  return (...args: Parameters<T>) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

Python

A decorator for memoization:

from functools import wraps

def memoize(func):
    cache = {}

    @wraps(func)
    def wrapper(*args):
        if args not in cache:
            cache[args] = func(*args)
        return cache[args]

    return wrapper

@memoize
def fibonacci(n):
    if n < 2:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(100))  # Instant!

Rust

A simple implementation of a stack:

struct Stack<T> {
    elements: Vec<T>,
}

impl<T> Stack<T> {
    fn new() -> Self {
        Stack { elements: Vec::new() }
    }

    fn push(&mut self, item: T) {
        self.elements.push(item);
    }

    fn pop(&mut self) -> Option<T> {
        self.elements.pop()
    }

    fn is_empty(&self) -> bool {
        self.elements.is_empty()
    }
}

fn main() {
    let mut stack = Stack::new();
    stack.push(1);
    stack.push(2);
    stack.push(3);

    while let Some(val) = stack.pop() {
        println!("{}", val);
    }
}

CSS

Custom properties and a gradient card:

.card {
  --card-bg: #16161f;
  --card-border: #2a2a3a;

  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  padding: 2rem;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.15);
}

JSON

A sample API response:

{
  "user": {
    "id": 42,
    "name": "Ada Lovelace",
    "email": "ada@example.com",
    "roles": ["admin", "developer"],
    "settings": {
      "theme": "dark",
      "notifications": true
    }
  }
}

Shell

A deployment script:

#!/bin/bash
set -euo pipefail

echo "Building project..."
npm run build

echo "Running tests..."
npm test

echo "Deploying to production..."
rsync -avz --delete dist/ server:/var/www/site/

echo "Done! Site is live."

---

All of these code blocks are styled with Shiki’s Night Owl theme in dark mode and Vitesse Light in light mode. Pretty nice out of the box!