258款代码高亮主题CSS合集

写博客或者做文档站的人都懂一个道理，代码块好不好看，直接决定别人愿不愿意往下读。自己从头配一套代码配色又特别费劲，改来改去还是那几种颜色，最后干脆放弃。这次整理的是 Highlight.js 官方主题库里的全部主题样式，一共 258 款，深色浅色都齐，全部是现成的 CSS，拿来就能把你站点的代码块换个样子，不用再满网搜别人分享的配色。

258 款主题是什么概念

Highlight.js 是目前用得最广的代码高亮库之一，GitHub 和很多技术博客的后台都在用它。它自带一整套主题样式，从常见的 GitHub 风格，到 Nord、Dracula、Atom One 这一类流行配色，再到 base16 系列衍生出来的一百七十多款主题，全都收在这一个包里。每一款都提供普通版和压缩版两个文件，线上直接引压缩版就行，体积小加载快。你几乎能找到任何风格的代码块外观。

主题是皮肤，高亮逻辑靠 Highlight.js 本体

有件事得先说清楚，免得你下载后发现它不会动。包里全是 CSS，也就是“皮肤”，真正判断哪段是关键字、哪段是字符串的逻辑，在 Highlight.js 的 JS 库里，本包不包含。用法是两步，先在页面里引入 Highlight.js 的官方脚本，再把主题样式挂上，两者配合才有高亮效果。接入也就是三行代码，页面加载完之后，它会自动把 pre 和 code 标签里的内容渲染成带颜色的代码块，你原来写的代码一个字都不用改。

换主题只要改一个文件名

这套包最实用的地方在于换主题的成本极低。你只要改一下 link 标签里引用的那个文件名，整套代码块的配色就跟着变了，别的代码一行都不用碰。想试效果，可以在本地把几个主题轮流挂上去对比，挑一个和站点整体风格最搭的。如果你用的是 WordPress 或者 Hexo 这类建站系统，很多主题本身就内置了 Highlight.js，那你要做的只是把主题样式文件换掉，更省事。

深色和浅色怎么挑

主题分两大类。浅色主题适合白天阅读，偏正式的技术文档和博客用它更清爽；深色主题适合开发者常看的夜间风格站点，长时间盯着不累眼。如果你的站点本身是深色背景，硬配浅色主题会非常刺眼，反过来也一样，所以选的时候先看站点底色，再挑同色系的主题。base16 那一百多款大多是深色底，颜色层次做得很细腻，值得多翻几个。做课件或者录编程教学视频的人，也可以在本地编辑器里套用这些主题，截图和录屏出来的代码会好看很多。

资源在文末付费区下载，文件按名称排好了，深色浅色分开，一眼就能找到想要的那类。压缩包里还附了一份使用说明，把接入的三步写得清清楚楚，照着做就能挂上，不用再去查文档。这些主题都是开源协议发布的，可以商用，放心用在你自己的项目里。如果只是想先看看效果，建议挑两三款主流配色试挂一下，再决定长期用哪一款，换的时候只改 link 那一行就行。