Phase 1 — Code Block Enhancements (Test)

This post is for testing Phase 1. Use the new code-theme picker in the header (top-right, <> icon) to switch between GitHub Light, Vitesse Dark, Dracula, and Catppuccin. Each block below has a copy button, a language badge, and line numbers.

Line highlight {1-3}

1
const greeting = "hello world";
2
const count = greeting.length;
3
const upper = greeting.toUpperCase();
4
console.log(upper, count);

Word highlight /const

1
const a = 1;
2
let b = 2;
3
const c = a + b;

Combined: highlight lines 2-3 and the word return

1
def add(x, y):
2
    total = x + y
3
    return total

Plain block (still gets copy + badge + line numbers)

1
npm run dev -- --port 3001
2
astro build

Optional path / title

Add title="path/to/file" to the fence to show a file path in the header. The language label is shown automatically on every block.

1
const BASE = import.meta.env.BASE_URL;
2
function updateThemeIcon() {}
3
export default updateThemeIcon;

Inline code also keeps its styling.