MDX Demo: All Features Showcase

Welcome to the MDX Demo

This article demonstrates all available MDX features you can use in your journey articles. From basic markdown to custom components, this is your complete reference.

Text Formatting

You can use italic text, bold text, bold italic, and even strikethrough.

Lists

Unordered lists:

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered lists:

1. First step
2. Second step
3. Third step
   1. Sub-step one
   2. Sub-step two

Task lists:

• Completed task
• Another completed task
• Pending task
• Future task

Blockquotes

"The best time to plant a tree was 20 years ago. The second best time is now."

Pro tip: You can nest blockquotes and use formatting inside them.

This is a multi-line blockquote that demonstrates how you can structure longer quoted content.

Code Blocks

Inline code looks like this: const greeting = "Hello, World!";

JavaScript example:

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
 
console.log(fibonacci(10)); // Output: 55

TypeScript example:

interface User {
  id: string;
  name: string;
  email: string;
}
 
const createUser = (data: User): User => {
  return {
    ...data,
    id: generateId(),
  };
};

Python example:

def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quick_sort(left) + middle + quick_sort(right)

YouTube Embed

Here's how you embed a YouTube video using the custom component: