代码增强插件 — PluginCodeEnhance 发布

v2.0.0 已重构，请前往查看。

https://wuqishi.com/archives/halo-plugin-code-enhance-v2-less-is-more
刚转 Halo 过来时，很新鲜，试了很多主题和插件，折腾起来蛮爽的。
在这个过程中也渐渐发觉，有些功能像是击中了某些爽点，感觉非常棒。其中就有​代码折叠​、​长图折叠​——这些功能让文章整体的排版更舒服，阅读体验提升很明显。
但问题是，当时这些功能只是某些主题集成了​，换了个主题就没了。而官方的代码高亮插件并没有带这些功能。我不想被主题绑架，索性自己弄了一个插件，把喜欢的功能都塞进去。
以下是代码增强插件 — PluginCodeEnhanc 的介绍，欢迎大家使用并反馈。


代码增强插件 — PluginCodeEnhance发布

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


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


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


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


我不想为了几个功能被锁死在某个主题上，于是决定做一个独立的插件，把这些问题一次性解决。
插件做了什么
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 行"，不用数。
标题栏
代码块顶部显示语言标识、复制按钮和折叠按钮，一目了然。
安装方法
方法一：手动安装


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


登录 Halo 管理后台


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


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


安装完成后启用插件


方法二：构建安装
# 克隆仓库
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 管理后台进行配置：










配置项


说明


默认值




​enableCodeHighlight​


是否启用代码高亮


​false




​hljsTheme​


亮色主题


​github.min.css​




​hljsDarkTheme​


暗色主题


​github-dark.min.css​




​enableCodeFold​


是否启用代码折叠


​false




​codeFoldLine​


代码折叠阈值（行数）


​20​




​enableImgFold​


是否启用长图折叠


​false




​imgFoldHeight​


图片折叠阈值（像素）


​400​





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

默认值说明：自 v1.1.5 起，所有功能开关默认关闭，避免与主题自带高亮产生冲突。用户按需开启即可。

使用效果
会自动显示：


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


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


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


行号显示


语法高亮


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


长图折叠预览



代码折叠预览

一点开发感受
这个插件的开发过程中，AI 帮了不少忙。从 Highlight.js 的初始化时机、到 IntersectionObserver 的懒加载实现、再到暗色主题的 CSS 变量切换，AI 帮我快速验证了技术方案，跳过了大量查文档的时间。
但架构决策、边界 case 处理、不同主题下的兼容性测试、移动端按钮尺寸调整——这些从 1 到可用的打磨，还是得自己来。
版本更新

V1.1.6



代码审查修复：基于全面代码审查，修复以下问题


语法高亮保留：新增 splitHtmlLines() 方法，行号显示时完整保留 hljs 语法高亮结构，修复行号导致高亮失效的问题


Shiki 冲突检测：恢复 Shiki 高亮插件检测逻辑，当检测到 Shiki 存在时自动跳过高亮处理，避免双重样式冲突


初始化合并：统一 observeCodeBlocks() 和 observeImages() 调用，移除重复的模块 init() 调用，提升性能


未使用变量清理：删除 pendingInit 未使用变量


CSS :has() 兼容：使用 @supports 特性查询，并为不支持 :has() 的浏览器提供 CSS fallback


JSDoc 完善：为所有关键函数添加完整的 JSDoc 注释，提升代码可维护性


错误日志：添加复制按钮失败的错误日志输出





V1.1.5



开关独立：所有功能开关默认关闭，未启用的功能不再加载任何资源


主题兼容：通过 CSS 变量统一管理配色，修复部分主题下代码文字不可读的问题


移动端修复：移除 touchstart 绑定，避免点击双触发；底部折叠按钮严格依据状态显隐


代码重构：applyThemeColors 改为数据驱动（BASE_COLORS），processCode 拆分为 ensureWrapper/addHeader 子方法


观察者优化：observeCodeBlocks 仅在启用高亮或代码折叠时观察代码块，避免仅启用长图折叠时误装饰代码


配置增强：亮色/暗色主题选择器均提供完整 14 种主题选项，支持反向配色


日志清理：移除所有 console.log 调试日志，保留 console.warn 错误日志





V1.1.4



资源统一：统一 CSS 文件名为 code-enhance.css（不存在 .min.css 版本）


开关独立修复：修复未开启代码高亮只开启其他选项时，前台仍加载代码高亮资源的问题


条件注入优化：根据各功能开关条件性注入资源，避免加载未启用的功能模块





V1.1.3



配置项重命名：enableCodeHighlight 重命名为 enableHighlight，语义更简洁


代码重构：重构头部处理器，抽取 injectResources、buildProperties、appendHljsResources、appendConfig、appendBaseResources 等方法，优化模板资源注入逻辑


功能检查简化：新增 hasAnyFeatureEnabled() 方法，简化全功能禁用时的跳过判断


模板匹配优化：抽取 hasContentVariable() 方法，简化内容模板判断逻辑


Logo 本地化：插件 Logo 路径从外链改为本地静态资源 static/images/dan.svg


类注释完善：补充 CodeEnhanceHeadProcessor 类注释文档


错误日志增强：onErrorResume 改为记录完整异常堆栈





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