代码增强插件 — PluginCodeEnhance 发布

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

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

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

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

为什么需要这个插件

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

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

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

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

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

插件做了什么

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

代码高亮

基于 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 到可用的打磨，还是得自己来。

项目地址