Welcome 👋

This blog platform is built with industry-standard tools that work everywhere:

react-markdown - Standard Markdown parser for React
react-syntax-highlighter - Theme-aware code highlighting
Mermaid.js - Interactive diagram rendering
remark-gfm - GitHub Flavored Markdown support

Why this stack?

✅ Cloudflare Workers compatible - No eval, new Function, or WebAssembly ✅ Theme-aware - Code blocks and diagrams adapt to light/dark mode ✅ SEO friendly - Server-rendered HTML with client hydration ✅ Standard syntax - Use industry-standard Markdown, no custom formats

How to use

Create or edit files in content/blog/*.mdx
Use standard Markdown frontmatter: title, date, summary, tags
Run npm run dev to start with hot reload (MDX changes auto-update!)
Deploy anywhere - Vercel, Cloudflare Pages, or any Node.js host

Rich content examples

Code blocks with syntax highlighting

Code blocks automatically adapt to your theme (light/dark):

// TypeScript example with full syntax highlighting
import { posts } from ".velite";
import { BlogContentWrapper } from "~/components/blog/blog-content-wrapper";

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = posts.find((p) => p.slug === params.slug);

  if (!post) {
    return <div>Post not found</div>;
  }

  return <BlogContentWrapper markdown={post.body} />;
}

JavaScript with different theme

// This will show in light or dark theme depending on your preference
const fetchData = async () => {
  const response = await fetch('/api/posts');
  const data = await response.json();
  return data;
};

fetchData()
  .then(posts => console.log(posts))
  .catch(error => console.error(error));

JSON data structures

{
  "platform": "Modern Blog",
  "features": [
    "Theme-aware highlighting",
    "Mermaid diagrams",
    "GitHub Flavored Markdown"
  ],
  "compatibility": {
    "cloudflare": true,
    "vercel": true,
    "nodejs": true
  }
}

Python code

# Python syntax highlighting
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate first 10 Fibonacci numbers
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

Mermaid Diagrams

Diagrams are rendered on the client side and adapt to your theme:

Flowchart

Sequence Diagram

Class Diagram

State Diagram

GitHub Flavored Markdown

Tables

Feature	Status	Description
Syntax highlighting	✅	Theme-aware code blocks
Mermaid diagrams	✅	Client-side rendering
Tables	✅	GitHub Flavored Markdown
Task lists	✅	Interactive checkboxes
Autolinks	✅	Automatic URL detection

Task Lists

Set up react-markdown
Add syntax highlighting with react-syntax-highlighter
Integrate Mermaid.js for diagrams
Implement theme detection
Add more diagram examples
Create additional blog posts

Strikethrough & Formatting

You can use ~~strikethrough~~, bold, italic, and inline code.

Autolinks

URLs are automatically linked: https://github.com/remarkjs/react-markdown

Inline Code

Use inline code like npm run dev or const theme = "dark" within paragraphs.

Blockquotes

Pro tip: Run npm run dev instead of npm run dev:fast to enable hot reload for MDX files. Your content changes will automatically update without manual rebuilds!

Note: All code blocks and diagrams automatically adapt to your theme preference. Try switching between light and dark mode to see the difference!

Next Steps

Customize styles: Edit src/styles/globals.css and tailwind.config.ts
Add more posts: Create new .mdx files in content/blog/
Extend features: Add custom components in src/components/blog/
Deploy: Push to your favorite hosting platform

Check out the features demo for more examples!