WP Code Plugin

一个为 WordPress 量身定制的、具有极致性能的 Markdown 风格代码高亮插件。

🌟 项目简介

WP-Code-Plugin 旨在重构 WordPress 默认的代码块展现形式。它不仅提供了类似 GitHub 的精美外观，更重要的是，它通过现代浏览器 API 彻底解决了同类插件在处理长文章、动态加载或频繁滚动时容易导致的页面卡死问题。

项目地址： https://github.com/shzstone/WP-Code-Plugin

✨ 功能特性

1. 🚀 极致性能 (Performance)

• 视口触发渲染 (IntersectionObserver)：代码高亮动作仅在代码块滚动进入视口时执行，彻底杜绝了因全量扫描 DOM 导致的滚轮卡顿。
• 空闲时间调度 (requestIdleCallback)：利用浏览器空闲时间处理非紧急任务，确保用户交互体验顺滑。
• 高效事件委托：全局仅使用一个事件监听器处理所有代码块的点击逻辑，内存占用极低。

2. 🎨 视觉体验 (UI/UX)

• GitHub 风格主题：内置 GitHub Light/Dark 像素级高亮配色。
• 自动深色模式：完美适配系统 prefers-color-scheme。
• 功能完备的 Header：包含语言标识、复制代码按钮、折叠/展开按钮。

3. 🤖 智能处理 (Intelligence)

• 自动语言检测：内置轻量级正则引擎，在未指定语言时能智能识别 PHP, JS, Python, SQL, Shell, C++ 等 20+ 常用语言。
• 全平台兼容：
  • Gutenberg：自动拦截输出原生 core/code 块。
  • 经典编辑器：提供快捷标签和按钮。
  • 自定义标签：支持 <代码 lang="js">...</代码> 这种更自然的输入方式。

📦 安装与配置

1. 下载项目：点击 Download ZIP 或通过 git clone 到你的插件目录。
2. 替换 Prism.js：
   • 本仓库自带的 assets/js/prism.js 为基础包。
   • 强烈建议：前往 PrismJS 官网 勾选你需要的编程语言（如 PHP, Java, Python 等），下载后替换插件中的 assets/js/prism.js。
3. 激活插件：在 WordPress 后台插件页面启用即可。

🛠️ 技术亮点：为什么它不卡顿？

很多同类插件使用 MutationObserver 监听 DOM 变动，这在滚动或有其他动态元素时会产生“事件风暴”，导致 CPU 飙升。

本项目通过以下逻辑优化：

1. PHP 预包装：所有的 HTML 结构在后端直接生成，不依赖 JS 在前端进行重组。
2. 状态锁 (Idempotency)：使用 data-js-done 和 data-highlighted 属性确保每个代码块只被处理一次。
3. 隔离观察：高亮逻辑与 DOM 变动监听完全隔离，切断了递归触发的路径。

⌨️ 示例用法

方式 A：标准短代码

[code lang="javascript"]
console.log("Hello, WP-Code-Plugin!");
[/code]

方式 B：Markdown 风格标签

<代码 lang="php">
<?php echo "智能渲染"; ?>
</代码>

方式 C：Gutenberg 块

直接在块编辑器中插入 代码 (Code) 块，插件将自动接管其前端显示。

📝 开源协议

本项目基于 GPL v2 or later 协议开源。