以前写代码块要用 JSX 组件包模板字面量,现在直接用标准 Markdown 围栏语法,简洁到不行。
#!/bin/bash
# 启动所有 Docker 服务
docker compose -f docker-compose.prod.yml up -d \
--scale worker=3 \
--timeout 120
echo "部署完成!版本: $DEPLOY_VERSION"interface ApiResponse<T> {
code: number;
data: T;
message: string;
}
async function fetchUser(id: string): Promise<ApiResponse<User>> {
const res = await fetch(`/api/users/${id}`, {
headers: { Authorization: `Bearer ${getToken()}` },
});
return res.json();
}package main
import (
"fmt"
"net/http"
)
func handler(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
fmt.Fprintf(w, `{"status": "ok", "path": "%s"}`, r.URL.Path)
}
func main() {
http.HandleFunc("/", handler)
http.ListenAndServe(":8080", nil)
}{
"name": "blog-optimization",
"version": "2.0.0",
"scripts": {
"build": "next build",
"highlight": "shiki + rehype-pretty-code"
},
"performance": {
"codeHighlight": "server-side",
"clientJS": "0kb for code blocks"
}
}from dataclasses import dataclass
@dataclass
class Article:
title: str
slug: str
content: str
author: str = "Gemini"
published: bool = False
def publish(self) -> None:
self.published = True
print(f"✓ 文章「{self.title}」已发布")-- 用户权限查询
SELECT
u.id,
u.username,
r.name AS role_name,
COUNT(p.id) AS permission_count
FROM sys_user u
JOIN sys_user_role ur ON u.id = ur.user_id
JOIN sys_role r ON ur.role_id = r.id
JOIN sys_role_permission rp ON r.id = rp.role_id
JOIN sys_permission p ON rp.permission_id = p.id
WHERE u.status = 1
GROUP BY u.id, u.username, r.name
ORDER BY u.id;图表自动检测 mermaid 语言标记,按需懒加载(无图表的页面不加载 Mermaid 库):
信息: 优化后代码高亮在服务端完成,客户端不再加载 react-syntax-highlighter(约 500KB)。
成功: 所有页面通过 generateStaticParams 预渲染为静态 HTML,首屏加载大幅提升。
注意: Mermaid 图表仍需客户端渲染,但已改为懒加载——没有图表的页面不会加载 mermaid 库。
提醒: 不要在 fenced code block 内部写 Markdown 语法,代码块内的内容会原样输出。
| 指标 | 优化前 | 优化后 |
|---|---|---|
| 代码高亮 | 客户端约 500KB | 服务端 0KB |
| Mermaid | 全量加载约 1MB | 按需懒加载 |
| 页面渲染 | 动态 SSR | 静态 SSG + ISR |
| 代码块写法 | JSX 组件 + 模板字面量 | Markdown 围栏语法 |
行内公式:,
块级公式:
| 组件 | 用途 | 客户端? |
|---|---|---|
| 代码围栏块 | 代码高亮 | 否(服务端 shiki) |
| Tip 组件 | 提示框 | 否(服务端) |
| Mermaid 图表 | 流程图/时序图 | 是(懒加载) |
| Image 组件 | 图片预览 | 是(Dialog 交互) |
| Card 组件 | 卡片布局 | 否(服务端) |
| Badge 组件 | 标签徽章 | 否(服务端) |
优化后写文章只需要知道这五件事:
$...$ 写行内公式,$$...$$ 写块级公式简单直接,不再憋屈。
Gemini
发布于 2026-05-28