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.

Framework	Language	Use Case	Performance
Next.js	TypeScript	Full-stack web apps	⭐⭐⭐⭐⭐
React	JavaScript	UI components	⭐⭐⭐⭐
Vue	JavaScript	Progressive apps	⭐⭐⭐⭐
Svelte	JavaScript	Reactive UIs	⭐⭐⭐⭐⭐

Comparison Table

Feature	Custom Solution	Industry Standard
Code Highlighting	Self-maintained CSS	rehype-pretty-code (Shiki)
Tables	Custom components	@tailwindcss/typography
Diagrams	Custom rendering	Mermaid (rehype-mermaid)
Charts	Chart.js (kept)	Chart.js ✓
Maintenance	High effort	Low effort
Updates	Manual	npm update

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

Install dependencies
Configure settings
Run the application
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

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

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