Shiki Syntax Highlighting Demo

May 20, 2025

This post exists to verify that Shiki syntax highlighting works correctly across multiple programming languages. Each fenced code block below uses a different language identifier.

Python

Here’s a simple Python function that calculates the nth Fibonacci number:

def fibonacci(n: int) -> int:
    """Return the nth Fibonacci number."""
    if n <= 1:
        return n
    a, b = 0, 1
    for _ in range(2, n + 1):
        a, b = b, a + b
    return b


if __name__ == "__main__":
    for i in range(10):
        print(f"fib({i}) = {fibonacci(i)}")

Bash

A shell script for setting up a new project directory:

#!/usr/bin/env bash
set -euo pipefail

PROJECT_NAME="${1:?Usage: $0 <project-name>}"
mkdir -p "$PROJECT_NAME"/{src,tests,docs}

cat > "$PROJECT_NAME/README.md" <<EOF
# $PROJECT_NAME

Project description goes here.
EOF

echo "Project '$PROJECT_NAME' created successfully."

TypeScript

A typed utility function for grouping an array of objects by a key:

type GroupBy<T> = Record<string, T[]>;

function groupBy<T>(items: T[], key: keyof T): GroupBy<T> {
  return items.reduce<GroupBy<T>>((acc, item) => {
    const groupKey = String(item[key]);
    if (!acc[groupKey]) {
      acc[groupKey] = [];
    }
    acc[groupKey].push(item);
    return acc;
  }, {});
}

// Example usage
const posts = [
  { slug: "hello-world", category: "General" },
  { slug: "building-effective-one-on-ones", category: "Engineering Management" },
  { slug: "shiki-syntax-highlighting-demo", category: "Engineering Management" },
];

const byCategory = groupBy(posts, "category");
console.log(byCategory);

Each of the three blocks above should render with full syntax highlighting courtesy of Shiki, which is bundled with Astro and requires no additional configuration.