Advanced MDX Features Demo

This post demonstrates all the new advanced MDX features that have been implemented in this blog. These features make writing and reading technical content much more engaging and professional.

Enhanced Code Blocks

The blog now supports proper syntax highlighting with various languages:

JavaScript Example

// Enhanced syntax highlighting with copy functionality
function calculateFibonacci(n) {
  if (n <= 1) return n;
  
  let a = 0, b = 1;
  for (let i = 2; i <= n; i++) {
    [a, b] = [b, a + b];
  }
  
  return b;
}

// Usage example
const result = calculateFibonacci(10);
console.log(`The 10th Fibonacci number is: ${result}`);

TypeScript with React

interface ButtonProps {
  variant: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
}

const Button: React.FC<ButtonProps> = ({ 
  variant, 
  size = 'md', 
  children, 
  onClick 
}) => {
  const baseClasses = 'rounded-lg font-medium transition-colors';
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    danger: 'bg-red-600 text-white hover:bg-red-700'
  };
  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  };

  return (
    <button
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

Python Example

def quick_sort(arr):
    """
    Efficient implementation of quicksort algorithm
    Time Complexity: O(n log n) average, O(n²) worst case
    Space Complexity: O(log n)
    """
    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)

# Example usage
numbers = [3, 6, 8, 10, 1, 2, 1]
sorted_numbers = quick_sort(numbers)
print(f"Sorted array: {sorted_numbers}")

Callout Components

The blog now supports various types of callouts for better content organization:

Enhanced Tables

Tables now have improved styling with proper borders, hover effects, and responsive design:

| Feature | Before | After | Impact | |---------|--------|-------|--------| | Syntax Highlighting | Basic (sugar-high) | Advanced (Shiki) | ⭐⭐⭐⭐⭐ | | Copy Functionality | None | Click to copy | ⭐⭐⭐⭐ | | Callout Components | None | 6 types available | ⭐⭐⭐⭐⭐ | | Table Styling | Basic | Enhanced with hover | ⭐⭐⭐ | | Math Support | None | KaTeX integration | ⭐⭐⭐⭐ | | TypeScript Support | Basic | Full type safety | ⭐⭐⭐⭐⭐ |

Inline Code

You can use inline code like const greeting = "Hello World" or reference functions like useState() and components like <Button /> directly in your text.

Enhanced Blockquotes

This is an enhanced blockquote with improved styling. It now has a colored left border, subtle background, and better typography that makes quoted content stand out while remaining readable.

Blockquotes can contain multiple paragraphs and even formatted text to emphasize important points from external sources.

Code Blocks with Different Languages

Bash/Terminal

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

SQL

-- Create a users table with proper indexing
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create an index for faster email lookups
CREATE INDEX idx_users_email ON users(email);

-- Insert sample data
INSERT INTO users (username, email) VALUES 
    ('johndoe', 'john@example.com'),
    ('janedoe', 'jane@example.com');

JSON Configuration

{
  "name": "advanced-blog",
  "version": "2.0.0",
  "description": "Blog with advanced MDX features",
  "dependencies": {
    "next": "canary",
    "react": "18.2.0",
    "shiki": "^3.12.0",
    "remark-gfm": "^4.0.1",
    "rehype-katex": "^7.0.1"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Enhanced Lists

Unordered Lists

• ✅ Enhanced syntax highlighting with Shiki
• ✅ Copy-to-clipboard functionality for code blocks
• ✅ Six different callout/alert component types
• ✅ Improved table styling with hover effects
• ✅ Better typography and spacing
• ✅ Full TypeScript support throughout

Ordered Lists

1. Plan: Identify the features needed for better writing experience
2. Design: Create reusable components with proper TypeScript types
3. Implement: Build each feature with careful attention to performance
4. Test: Ensure everything works in both development and production
5. Document: Create comprehensive examples for future reference
6. Deploy: Make the enhanced features available to all blog posts

Technical Implementation Details

Architecture Decisions

Key architectural choices:

• Server-first rendering: All components work during static generation
• Progressive enhancement: Client-side features enhance but don't replace server functionality
• Type safety: Full TypeScript support with proper interfaces
• Performance: Optimized for fast loading and minimal JavaScript bundle size

Component Structure

src/components/
├── code.tsx          # Enhanced code blocks with copy functionality
├── callout.tsx       # Alert/callout components (6 types)
├── simple-code.tsx   # Server-compatible code highlighting
├── simple-mdx.tsx    # Main MDX processor with all features
├── table-of-contents.tsx  # TOC generation and scroll spy
└── toc-wrapper.tsx   # Client-side wrapper for TOC

Future Enhancements

Planned improvements:

• Math equation support with KaTeX (CSS already included)
• Interactive components for demos
• Mermaid diagram support
• Custom syntax highlighting themes
• Table of contents with scroll spy (currently disabled for build compatibility)

Conclusion

These enhanced MDX features significantly improve both the writing and reading experience. Writers get powerful tools for creating engaging technical content, while readers benefit from better formatting, syntax highlighting, and information hierarchy.

---

This demo post showcases the enhanced MDX capabilities. All features are production-ready and optimized for performance.