Advanced MDX Syntax and Code Highlighting

Charted Data uses Expressive Code to provide an IDE-grade reading experience. This guide showcases every available feature for code blocks, from basic titles to complex word-level diffs.

1. Syntax Highlighting#

The system supports dozens of programming languages out of the box with balanced, high-contrast themes.

1
function hello() {
2
  console.log("Hello, world!");
3
}

2. Window Titles & Filenames#

Adding a title (like a filename) provides essential context and wraps the code in a professional frame.

1
import { createClient } from "@neon/serverless";
2

3
export const db = createClient(process.env.DATABASE_URL);

How to author:

1
```language title="src/lib/database.ts"```

3. Highlighting Specific Lines#

Focus your readers' attention by highlighting single lines, ranges, or non-consecutive lines.

1
import { useRouter } from "next/navigation";
2

3
export function useRedirect() {
4
  const router = useRouter();
5

6
  return () => {
7
    router.push("/dashboard");
8
  };
9
}

How to author:

1
```language \{1, 3-4, 7\}```

4. Focused Lines (Dimming)#

Dim all non-selected lines to make specific logic truly pop.

1
// This line is dimmed
2
const apiKey = process.env.API_KEY;
3
const client = new Client({ apiKey });
4
// This line is also dimmed

How to author:

1
```language focus=\{2-3\}```

5. Word Highlighting#

Highlight specifically chosen words or phrases throughout the entire code block.

1
async function getData(url) {
2
  const res = await fetch(url);
3
  return res.json();
4
}

How to author:

1
```javascript "fetch" "async" "await"```

6. Inline Extensions (Ins/Del)#

Show modifications or alternatives within a single line using ins and del.

1
import { setup } from "@/lib/engine-v4"; // Upgraded from v3

How to author:

1
```javascript ins="v4" del="v3"```

7. Traditional Diff Support#

Use standard diff syntax for comparing versions or showing pull-request-style changes.

1
function OldButton({ text }) {
2
  return <button>{text}</button>;
3
}
4

5
function NewButton({ children, variant = "primary" }) {
6
  return <button className={variant}>{children}</button>;
7
}

How to author:

1
put "-" to show it's removed
2
put "+" to show it's added

8. Terminal & Shell Simulation#

Shell commands are automatically detected and styled with prompts.

1
# Clone the repository
2
git clone https://github.com/charted-data/boilerplate.git
3

4
# Install with Bun
5
bun install

Multi-line Commands#

The highlighter preserves backslashes for clean terminal documentation.

1
vercel deploy \
2
  --prod \
3
  --token $VERCEL_TOKEN \
4
  --yes

9. Line Numbers#

Line numbers are enabled by default for all code blocks to aid technical discussion. They can be disabled if needed.

console.log("Clean output without line numbers");

How to author:

1
```language showLineNumbers=false```

10. Combining Features#

You can combine multiple features (Title, Highlighting, and Word Highlighting) for maximum clarity.

1
export async function PUT(req: Request) {
2
  const data = await req.json();
3

4
  // Highlighting specific operation
5
  await db.update(posts).set(data).where(eq(posts.id, id));
6

7
  return Response.json({ success: true });
8
}

How to author:

1
```language \{5\} "update" title="api/posts/[id]/route.ts"```

Happy Coding! ⚡