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.

What You'll Learn #

💻 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. Use the CodeTabs component to display multiple variations side-by-side.

TypeScript, JavaScript, and Python #

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
}

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())

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
}

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
}

1
// How to write:
2
\```typescript title="api/users.ts"
3
export async function getUsers() { ... }
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
}

1
// How to write:
2
\```typescript {1, 4-6, 9}
3
...
4
\```

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

1
// How to write:
2
\```javascript ins="newData" del="oldData"
3
const result = process(newData);
4
\```

Terminal & Shell Documentation #

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

1
# Install the package
2
npm install @charted-data/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
 }

Configuration Comparisons #

Let's compare configuration files using our Compare component.

Next.js Config

1
import type { NextConfig } from "next";
2

3
const nextConfig: NextConfig = {
4
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
5
  images: {
6
    remotePatterns: [
7
      {
8
        protocol: "https",
9
        hostname: "**",
10
      },
11
    ],
12
  },
13
};
14

15
export default nextConfig;

Vite Config

1
import { defineConfig } from 'vite';
2
import react from '@vitejs/plugin-react';
3

4
export default defineConfig({
5
  plugins: [react()],
6
  build: {
7
    outDir: 'dist',
8
  },
9
  server: {
10
    port: 3000,
11
  },
12
});

1
// How to write:
2
<Compare labels={["Label 1", "Label 2"]}>
3
\```typescript
4
// Side 1
5
\```
6
---
7
\```typescript
8
// Side 2
9
\```
10
</Compare>

Multi-language Support

Dozens of languages supported out of the box with beautiful syntax highlighting.

Line Highlighting

Draw attention to specific lines with {1-3} syntax.

Word Highlighting

Highlight specific words or phrases with quote syntax.

Diff Support

Show code changes clearly with diff blocks.

Copy Button

Easy one-click copying for all code blocks.

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

Happy Coding!

Advanced MDX Syntax and Code Highlighting

What You'll Learn #

💻 Multi-Language Support

🎨 Line Highlighting

✏️ Word Highlighting

📝 Diff Support

🎯 Custom Themes

📋 Copy Button

Language Support #

TypeScript, JavaScript, and Python #

React/JSX #

CSS & Tailwind #

SQL #

JSON & YAML #

Advanced Formatting #

Code Block Titles #

Line Highlighting #

Word Highlighting #

Terminal & Shell Documentation #

Multi-line Commands #

Diff Highlighting #

Configuration Comparisons #

Common Code Patterns #

Quick Reference #

Features Summary #

Multi-language Support

Line Highlighting

Word Highlighting

Diff Support

Copy Button

💻 Multi-Language Support

🎨 Line Highlighting

✏️ Word Highlighting

📝 Diff Support

🎯 Custom Themes

📋 Copy Button

How to fetch data in Next.js?

How to handle forms in React?

How to style with Tailwind?

Multi-language Support

Line Highlighting

Word Highlighting

Diff Support

Copy Button