代码高亮实测：五种语言的服务端渲染

山果的代码高亮完全在服务端完成，输出的就是带颜色的 HTML，前端没有一行高亮 JS。下面用五种语言实测。

PHP

function sumUpTo(int $n): int {
    // 累加 1 到 n
    $total = 0;
    for ($i = 1; $i <= $n; $i++) {
        $total += $i;
    }
    return $total;
}

echo sumUpTo(100); // 5050

JavaScript

const debounce = (fn, wait = 200) => {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
};

window.addEventListener('resize', debounce(() => {
  console.log('resized', window.innerWidth);
}), { passive: true });

Python

from dataclasses import dataclass

@dataclass
class Post:
    title: str
    views: int = 0

    def hot(self) -> bool:
        # 简单的热文判断
        return self.views > 1000

posts = [Post("Hello", 500), Post("World", 2000)]
hot = [p.title for p in posts if p.hot()]
print(hot)  # ['World']

CSS

.sg-card {
    /* 白卡片体系 */
    background: var(--sg-surface);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgb(30 40 60 / 5%);
    transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1);
}

.sg-card:hover {
    transform: translateY(-2px);
}

HTML

<article class="sg-card">
    <header class="sg-card__head">
        <h2 class="sg-card__title">标题</h2>
        <time datetime="2026-10-31">2026-10-31</time>
    </header>
    <p class="sg-card__excerpt">摘要文字</p>
</article>

语言标签与复制

每个代码块左上角显示语言名，右上角有一键复制按钮。复制走浏览器剪贴板 API，不引入任何第三方脚本。