语法高亮与代码块

语法高亮

代码块用 Shiki 在构建期高亮，语法树来自 TextMate 语法定义，和 VS Code 同一套引擎。 支持 ts、tsx、js、jsx、json、bash、css、html、md、mdx、python、rust 等常用语言， 不写语言标记时会尝试自动识别。

明暗双主题

同一段代码会同时输出两套颜色：

• 浅色系统用 github-light
• 深色系统用 github-dark

切换配色纯靠CSS，不加载任何 JavaScript，也不会闪烁。

复制按钮

鼠标移到代码块上，右上角会出现「复制」按钮，点击后变成「已复制」， 两秒后自动恢复。键盘用户按 Tab 聚焦到代码块时按钮也会常驻显示， 不会出现「看不到按钮就没法复制」的情况。

注意：浏览器的剪贴板 API 只在 HTTPS 或 localhost 下可用。 用局域网 IP 以 http 访问时复制会静默失败，这时仍可以手动选中复制。

语言标签

左上角显示语言名，纯装饰，不占额外空间。

横向滚动提示

代码超出宽度时可以横向滚动，右侧会出现渐变遮罩提示还有内容。 实测一段很长的配置：

export const config = {
  server: { port: 3000, host: "0.0.0.0" },
  experimental: { optimizePackageImports: ["lucide-react", "date-fns", "@/lib/utils"] },
  images: { formats: ["image/avif", "image/webp"], minimumCacheTTL: 14400 },
  async redirects() { return [{ source: "/old-blog", destination: "/blog", permanent: true }] },
} satisfies Record<string, unknown>

不写语言会怎样

没有语言标记时，Shiki 会当作纯文本处理，不着色：

这是一段纯文本代码块
不会被着色
但依然有复制按钮和边框