Blog Features Demo

This blog post demonstrates all available rendering features using widely-adopted industry standards.

Code Highlighting

We use rehype-pretty-code (powered by Shiki) for syntax highlighting - the same solution used by Vercel, shadcn/ui, and many top Next.js projects.

JavaScript Example

// Example: React component with hooks
import { useState, useEffect } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count changed to: ${count}`);
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

TypeScript Example

// Type-safe API client
interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error("Failed to fetch user");
  }
  return response.json();
}

Python Example

# Data processing with pandas
import pandas as pd
import numpy as np

def analyze_data(df: pd.DataFrame) -> dict:
    """Analyze dataset and return statistics."""
    return {
        'mean': df.mean(),
        'std': df.std(),
        'correlation': df.corr()
    }

Tables

Tables are styled using @tailwindcss/typography - the official Tailwind CSS plugin used by thousands of projects.

Comparison Table

Diagrams and Charts with Mermaid

We use Mermaid.js - the industry-standard diagramming library that supports flowcharts, sequence diagrams, and even simple charts!

Flowchart

Sequence Diagram

Pie Chart (Mermaid)

Text Formatting

You can use standard Markdown formatting:

• Bold text for emphasis
• Italic text for subtle emphasis
• inline code for technical terms
• Links to external resources

Blockquotes

"The best code is no code at all. Every line of code you write is a line that has to be maintained."

— Jeff Atwood

Lists

Unordered List

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

Ordered List

1. Install dependencies
2. Configure settings
3. Run the application
4. Deploy to production

Summary

This blog system uses industry-standard, widely-adopted solutions:

• ✅ react-markdown - Standard React markdown parser
• ✅ react-syntax-highlighter - Code highlighting with Prism.js
• ✅ @tailwindcss/typography - Prose styling
• ✅ Mermaid.js - Diagrams, flowcharts, and simple charts

Benefits

1. Cloudflare Workers Compatible: No eval/WebAssembly, works everywhere
2. Industry Standards: All libraries are widely adopted with excellent documentation
3. SEO Friendly: Content rendered to semantic HTML
4. No Custom Syntax: Standard markdown only, no proprietary formats
5. Low Maintenance: Community-maintained packages with regular updates
6. Client-Side Rendering: Works with static export and edge environments

Pure markdown + standard libraries = maintainable, portable blog system.