Blog Features Showcase

This post showcases the latest reading and content features implemented in this site.

Mermaid + lightbox

Click the diagram to open it in an overlay.

flowchart TD
  Start[Write MDX] --> Code[Add code fence meta]
  Code --> Render[Render with Astro + Shiki]
  Render --> UX[Better reading experience]

Code filename header + line numbers

Use explicit metadata:

__CODE_META__ filename="src/utils/formatDate.ts" lineNumbers
export function formatDate(input: Date): string {
  return input.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  });
}

Shorthand filename metadata

You can also use shorthand meta without filename=:

__CODE_META__ src/components/Button.tsx
type ButtonProps = {
  label: string;
};

export function Button({ label }: ButtonProps) {
  return <button>{label}</button>;
}

Image lightbox

Click the image to zoom in.

What this demonstrates

• Tab-like filename labels above code blocks
• Optional line numbers driven by code fence meta
• Zoom overlay for images and Mermaid diagrams
• Keyboard support (Enter/Space to open, Esc to close)