刚转 Halo 过来时，很新鲜，试了很多主题和插件，折腾起来蛮爽的。

在这个过程中也渐渐发觉，有些功能像是击中了某些爽点，感觉非常棒。其中就有代码折叠、长图折叠——这些功能让文章整体的排版更舒服，阅读体验提升很明显。

但问题是，当时这些功能只是某些主题集成了，换了个主题就没了。而官方的代码高亮插件并没有带这些功能。我不想被主题绑架，索性自己弄了一个插件，把喜欢的功能都塞进去。

以下是代码增强插件 — PluginCodeEnhanc 的介绍，欢迎大家使用并反馈。

为什么需要这个插件

作为一个经常分享技术文章的博主，代码展示和图片排版一直是我非常在意的点。在使用 Halo 的过程中，我发现：

1. 代码过长问题 ：一个配置文件贴出来，页面被撑得老长，读者得不断滚动

2. 图片过大问题 ：高清截图直接展开，占据大量屏幕空间，页面显得很乱

3. 主题绑定问题 ：很多实用功能只在特定主题里有，换个主题就全丢了

我不想为了几个功能被锁死在某个主题上，于是决定做一个独立的插件，把这些问题一次性解决。

插件做了什么

V1.1.0 版本扩展模板匹配范围，支持 Moments 和 Docsme 插件页面适用范围：当前仅支持文章（post）和页面（page）模板，Moments / Docsme 等插件页面暂不支持。

这个插件围绕 "让代码和图片展示更舒服" 这个目标，做了几件事：

代码高亮（自动检测 Shiki，避免冲突）

基于 Highlight.js 11.11.1，支持 14 种高亮主题（7 个亮色 + 7 个暗色），包括：

• 亮色： GitHub Light、Atom One Light、Solarized Light、VS Light、Tomorrow、Ascetic、Foundation

• 暗色： GitHub Dark、Atom One Dark、VS 2015 Dark、Monokai、Solarized Dark、Obsidian、Dracula

暗色模式跟随 Halo 主题自动切换，配色无缝衔接。

智能代码折叠

长代码块超过设定行数自动折叠，展开 / 收起一键切换。页面不再被某段配置撑得臃肿，还可以滑动查看，想看细节时再展开。

特点：

• 可自定义折叠阈值（默认 20 行）

• 展开 / 收起状态记忆

• 折叠按钮跟随浮动，方便操作

长图折叠

图片太高？自动收起，减少页面跳动和加载压力。

超过指定高度（默认 400px）的图片会自动折叠：

• 保持页面整洁

• 点击展开查看完整图片

• 支持触摸操作，移动端友好

行号显示

为代码块添加行号，方便引用和定位。讨论代码时直接说 "看第 15 行"，不用数。

标题栏

代码块顶部显示语言标识、复制按钮和折叠按钮，一目了然。

安装方法

方法一：手动安装

1. 下载最新版本的插件 JAR 文件

2. 登录 Halo 管理后台

3. 进入「插件管理」→「安装插件」

4. 选择下载的 JAR 文件上传安装

5. 安装完成后启用插件

方法二：构建安装

# 克隆仓库
git clone https://github.com/NoEggEgg/plugin-code-enhance.git
cd plugin-code-enhance

# 构建插件
gradle build -x test

# 构建产物位于 build/libs/plugin-code-enhance-1.0.0.jar

---

配置选项

插件安装后，可在 Halo 管理后台进行配置：

所有功能都可以单独开关，阈值也能按需调整。

使用效果

会自动显示：

• 顶部标题栏（显示语言名称 "Java"）

• 复制按钮（一键复制代码）

• 折叠按钮（收起 / 展开代码块）

• 行号显示

• 语法高亮

长图和超长代码块会自动折叠，页面更清爽。

一点开发感受

这个插件的开发过程中，AI 帮了不少忙。从 Highlight.js 的初始化时机、到 IntersectionObserver 的懒加载实现、再到暗色主题的 CSS 变量切换，AI 帮我快速验证了技术方案，跳过了大量查文档的时间。

但架构决策、边界 case 处理、不同主题下的兼容性测试、移动端按钮尺寸调整——这些从 1 到可用的打磨，还是得自己来。

另外，感谢 Handsome 大神的关键指导，0.01刀指导费已经记账。

版本更新

V1.1.2

• 更新静态资源引用为压缩版本 (code-enhance.min.css/js)

• 删除未压缩的源文件 (code-enhance.css/js)

V1.1.1

• 强化 XSS 防护：hljs 高亮流程使用 textContent 提取代码，未高亮场景下行号使用 escapeHtml() 转义

• 修复异步竞态：Highlight.init() 异步加载时延迟启动 IntersectionObserver，避免 doHighlight 清空已装饰的行号

• 代码审查优化：notContentTemplate 检查顺序调优，删除冗余方法，预计算选择器字符串

• 测试增强：新增 5 个测试用例，覆盖默认值、插件变量兜底路径、注入内容断言

V1.1.0

• 动态加载 highlight.min.js，仅在检测到代码块时引入资源

• 扩展模板匹配范围，支持 Moments 和 Docsme 插件页面

• 重构高亮逻辑，使用 hljs API 处理文本以防止 XSS

• 移除静态脚本标签，改为前端按需加载

• 优化触摸事件监听，添加 passive: true 提升滚动性能

• 改进代码块标题栏 DOM 构建，确保语言文本安全插入

• 调整折叠按钮样式为 sticky 定位

V1.0.0

• 初始版本发布，支持代码高亮、折叠、长图折叠等功能

项目地址

https://github.com/NoEggEgg/plugin-code-enhance