博客功能演示

本文使用广泛采用的行业标准方案，展示博客的各项渲染功能。

代码高亮

公开文章阅读器使用 react-syntax-highlighter 与 Prism 实现适配主题的代码块。源码构建也配置了 rehype-pretty-code（Shiki）；公开正文使用已准备内容的 Markdown 渲染器。

JavaScript 示例

// 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 示例

// 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 示例

# 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()
    }

表格

表格样式使用 @tailwindcss/typography，这是被大量项目采用的官方 Tailwind CSS 插件。

框架	语言	用途	性能
Next.js	TypeScript	全栈 Web 应用	⭐⭐⭐⭐⭐
React	JavaScript	UI 组件	⭐⭐⭐⭐
Vue	JavaScript	渐进式应用	⭐⭐⭐⭐
Svelte	JavaScript	响应式 UI	⭐⭐⭐⭐⭐

对比表

功能	自定义方案	行业标准
代码高亮	自行维护 CSS	react-syntax-highlighter（Prism）
表格	自定义组件	@tailwindcss/typography
图表	自定义渲染	Mermaid.js
简单数据图表	自定义图表渲染	Mermaid 饼图
维护	工作量较高	工作量较低
更新	手动更新	npm update

使用 Mermaid 绘制图表

我们使用 Mermaid.js，这个广泛采用的图表库支持流程图、时序图，甚至简单的数据图表。

流程图

正在加载图表…

时序图

正在加载图表…

饼图（Mermaid）

正在加载图表…

文本格式

可以使用标准 Markdown 格式：

使用粗体文本强调内容
使用_斜体文本_作轻度强调
使用行内代码表示技术术语
使用链接访问外部资源

引用

“最好的代码是不写代码。每写一行代码，就多一行需要维护的代码。”

— Jeff Atwood

列表

无序列表

第一项
第二项
- 嵌套项
- 另一个嵌套项
第三项

有序列表

安装依赖
配置设置
运行应用
部署到生产环境

总结

博客系统使用广泛采用的标准方案：

✅ react-markdown：标准 React Markdown 解析器
✅ react-syntax-highlighter：基于 Prism.js 的代码高亮
✅ @tailwindcss/typography：正文排版样式
✅ Mermaid.js：图表、流程图与简单数据图表

优点

兼容 Cloudflare Workers：无需 eval/WebAssembly，可跨环境使用
行业标准：所用库广泛采用，文档完善
SEO 友好：内容渲染为语义化 HTML
无自定义语法：只用标准 Markdown，无专有格式
低维护成本：社区维护的包持续更新
客户端渲染：适用于静态导出和边缘环境

纯 Markdown + 标准库 = 易维护、可移植的博客系统。