Advanced MDX Syntax and Code Highlighting

This post explores the professional code highlighting features available in this template. Whether you're writing tutorials, documentation, or technical articles, these features ensure your code examples are clear and expressive.

Features #

Multi-Language Support: Syntax highlighting for dozens of languages.
Line Highlighting: Draw attention to specific code lines.
Word Highlighting: Highlight specific terms or phrases.
Diff Support: Show code changes clearly.
Custom Themes: Dark and light theme support.
Copy Button: One-click code copying.

Language Support #

The syntax highlighter supports dozens of programming languages.

TypeScript #

1
interface User {
2
  id: string;
3
  name: string;
4
  email: string;
5
  createdAt: Date;
6
}
7

8
async function getUser(id: string): Promise<User | null> {
9
  const response = await fetch(`/api/users/${id}`);
10

11
  if (!response.ok) {
12
    return null;
13
  }
14

15
  return response.json();
16
}

Python #

1
from dataclasses import dataclass
2
from typing import Optional
3
from datetime import datetime
4

5
@dataclass
6
class User:
7
    id: str
8
    name: str
9
    email: str
10
    created_at: datetime
11

12
async def get_user(user_id: str) -> Optional[User]:
13
    """Fetch a user by their ID."""
14
    response = await fetch(f"/api/users/${user_id}")
15

16
    if not response.ok:
17
        return None
18

19
    return User(**await response.json())

JavaScript #

1
async function getUser(userId) {
2
  const response = await fetch(`/api/users/${userId}`);
3

4
  if (!response.ok) {
5
    return null;
6
  }
7

8
  return response.json();
9
}

React/JSX #

1
import { useState, useEffect } from 'react';
2

3
export function UserProfile({ userId }) {
4
  const [user, setUser] = useState(null);
5
  const [loading, setLoading] = useState(true);
6

7
  useEffect(() => {
8
    async function fetchUser() {
9
      try {
10
        const response = await fetch(`/api/users/${userId}`);
11
        const data = await response.json();
12
        setUser(data);
13
      } finally {
14
        setLoading(false);
15
      }
16
    }
17

18
    fetchUser();
19
  }, [userId]);
20

21
  if (loading) return <div>Loading...</div>;
22
  if (!user) return <div>User not found</div>;
23

24
  return (
25
    <div className="user-profile">
26
      <h1>{user.name}</h1>
27
      <p>{user.email}</p>
28
    </div>
29
  );
30
}

CSS & Tailwind #

1
.user-profile {
2
  display: flex;
3
  flex-direction: column;
4
  gap: 1rem;
5
  padding: 2rem;
6
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
7
  border-radius: 12px;
8
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
9
}
10

11
.user-profile h1 {
12
  font-size: 2rem;
13
  font-weight: 700;
14
  color: white;
15
  margin: 0;
16
}
17

18
.user-profile p {
19
  font-size: 1rem;
20
  color: rgba(255, 255, 255, 0.8);
21
  margin: 0;
22
}

1
<div className="flex flex-col gap-4 p-8 bg-gradient-to-br from-purple-500 to-purple-900 rounded-xl shadow-xl">
2
  <h1 className="text-3xl font-bold text-white m-0">
3
    User Name
4
  </h1>
5
  <p className="text-base text-white/80 m-0">
6
    user@example.com
7
  </p>
8
</div>

SQL #

1
SELECT
2
  u.id,
3
  u.name,
4
  u.email,
5
  COUNT(p.id) as post_count
6
FROM users u
7
LEFT JOIN posts p ON u.id = p.author_id
8
WHERE u.created_at > '2024-01-01'
9
GROUP BY u.id, u.name, u.email
10
HAVING COUNT(p.id) > 5
11
ORDER BY post_count DESC
12
LIMIT 10;

JSON & YAML #

1
{
2
  "name": "blog-template",
3
  "version": "1.0.0",
4
  "dependencies": {
5
    "next": "^16.0.0",
6
    "react": "^19.0.0",
7
    "tailwindcss": "^4.0.0"
8
  },
9
  "scripts": {
10
    "dev": "next dev",
11
    "build": "next build",
12
    "start": "next start"
13
  }
14
}

1
name: blog-template
2
version: 1.0.0
3
dependencies:
4
  next: ^16.0.0
5
  react: ^19.0.0
6
  tailwindcss: ^4.0.0
7
scripts:
8
  dev: next dev
9
  build: next build
10
  start: next start

Advanced Formatting #

Code Block Titles #

Adding a title (like a filename) to your code block provides context and makes it look like a real IDE window.

1
export async function getUsers() {
2
  const res = await fetch('https://api.example.com/users');
3
  return res.json();
4
}

Line Highlighting #

You can highlight single lines, ranges, or multiple non-consecutive lines using the {} syntax.

1
import { db } from "./database";
2

3
export async function updateUser(id: string, data: any) {
4
  // Use a transaction for safety
5
  return await db.transaction(async (tx) => {
6
    await tx.update(users).set(data).where(eq(users.id, id));
7
  });
8

9
  console.log("User updated successfully");
10
}

Word Highlighting #

Highlight specific words or phrases. Use ins and del to mark additions/removals within a specific line.

1
const response = await fetch('/api/data');
2
const data = await response.json();

1
const result = process(newData); // Changed from oldData

Terminal & Shell Documentation #

The highlighter automatically detects shell prompts and provides a clean "Copy Terminal" experience.

1
# Install the package
2
npm install @base-blog/toolkit
3

4
# Run the development server
5
npm run dev

Multi-line Commands #

It also handles backslash-escaped multi-line commands gracefully.

1
docker run -d \
2
  -p 8080:80 \
3
  --name my-app \
4
  my-custom-image:latest

Diff Highlighting #

Show code changes with diff syntax for a detailed view of additions and removals.

1
// Before
2
 function oldApproach(data) {
3
   return data.map(item => item.value);
4
 }
5

6
// After
7
 function newApproach(data) {
8
   return data
9
     .filter(item => item.isValid)
10
     .map(item => item.value);
11
 }

Conclusion #

This entire post is rendered using Expressive Code, ensuring that your documentation is not only functional but also visually stunning.

Happy Coding!