Enhanced Code Blocks with Shiki Transformers

• 2 min read • 77
astromarkdown

Shiki supports built-in transformers for filename labels, line highlighting, and diff notation — no plugins needed.

Filename Labels

Add title="filename" to any fenced code block to show a filename tab:

src/utils/greet.ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

Line Highlighting

Highlight specific lines with // [!code highlight]:

global.css
:root {
  --color-primary: #6366f1;
  --color-secondary: #a855f7;
  --radius-md: 0.5rem;
}

Focus

Dim everything except the lines marked with // [!code focus]. Hovering the block restores full opacity.

src/utils/auth.ts
import { hash } from 'bcrypt';
import { db } from './db';

export async function createUser(email: string, password: string) {
  const hashed = await hash(password, 10);
  return db.user.create({ data: { email, password: hashed } });
}

export async function deleteUser(id: string) {
  return db.user.delete({ where: { id } });
}

Diff View

Show additions and removals with // [!code ++] and // [!code --]:

config.ts
export const config = {
  theme: 'light',
  theme: 'dark',
  prefetch: false,
  prefetch: true,
  lang: 'en',
};

All Together

src/components/Button.tsx
interface ButtonProps {
  label: string;
  variant?: 'primary' | 'ghost';
}

export function Button({ label, variant = 'primary' }: ButtonProps) {
  return (
    <button className={`btn btn--${variant}`}>
      {label}
    </button>
  );
}