Code Block Enhancements (MDX)

Code Block Enhancements (MDX)

CapsuleX provides enhanced code blocks with filename labels, diff syntax, and a copy button.

Note: For Markdown files, see Code Block Enhancements (MD).

Basic Code Block

A simple code block with syntax highlighting:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

With Filename

Add a filename label using the title attribute:

export function formatDate(date: Date): string {
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
}

def fibonacci(n: int) -> int:
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))

Diff Syntax

Show code changes with diff syntax:

 function greet(name: string): string {
-  return `Hello, ${name}!`;
+  return `Hi, ${name}!`;
 }

-console.log(greet('World'));
+console.log(greet('Astro'));

- oldFunction();
+ newFunction();

+ const added = true;
  const unchanged = false;
- const removed = true;

Filename + Diff

Combine filename with diff syntax:

 export const config = {
-  theme: 'light',
+  theme: 'dark',
   lang: 'en',
 };

Copy Button

Hover over any code block to see the copy button. Click it to copy the code to your clipboard.

// Try copying this code!
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

Multiple Languages

Code blocks support various programming languages:

.capsule-nav {
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.8);
}

<nav class="capsule-nav">
  <a href="/" class="nav-logo">Logo</a>
  <div class="nav-links">...</div>
</nav>

Usage

Use standard Markdown code blocks with optional attributes:

```language title="filename.ts"
// code here
```

For diff syntax, add + or - prefixes:

```diff
+ added line
- removed line
  unchanged line
```

Features

• Filename labels — Show the file name above the code
• Diff syntax — Highlight added/removed lines
• Copy button — One-click copy to clipboard
• Syntax highlighting — Support for 100+ languages
• Dark mode — Automatic theme switching