Plate项目代码块插件重大升级：从PrismJS迁移到Highlight.js

Plate项目简介

Plate是一个现代化的富文本编辑器框架，基于Slate.js构建，提供了模块化、可扩展的编辑器解决方案。它允许开发者通过插件系统轻松添加各种富文本功能，如代码块、表格、列表等，同时保持核心的轻量化和灵活性。

代码块插件架构升级

Plate的代码块插件(@udecode/plate-code-block)近期完成了从PrismJS到Highlight.js的重大架构迁移，版本号跃升至46.0.0。这一变更不仅带来了性能提升，还解决了多个长期存在的问题。

技术栈迁移背景

PrismJS曾是前端语法高亮的首选方案，但随着项目发展，其体积庞大和某些功能限制逐渐显现。相比之下，Highlight.js配合Lowlight的组合提供了更轻量、更灵活的解决方案：

1. 更小的打包体积：显著减少了最终应用的体积
2. 更好的多行标记处理：解决了之前逐行计算token导致的问题
3. 更现代的架构：采用更活跃维护的库

主要变更点

1. 核心高亮引擎替换

新版本完全移除了对PrismJS的依赖，转而采用Highlight.js作为底层高亮引擎，并通过Lowlight提供更友好的API接口。开发者现在需要这样初始化：

import { all, createLowlight } from 'lowlight';

const lowlight = createLowlight(all);

CodeBlockPlugin.configure({
  options: {
    lowlight,
  },
});

2. 多行标记计算优化

旧版本在处理代码高亮时采用逐行计算token的方式，这在处理跨越多行的语法结构(如多行注释或字符串)时会出现问题。新版本改为一次性计算整个代码块的token，确保了高亮结果的准确性。

3. API简化与改进

• 移除了syntax和syntaxPopularFirst选项
• 新增defaultLanguage选项设置默认语言
• 简化了配置，只需提供lowlight实例或完全省略即可禁用语法高亮

4. 组件逻辑重构

移除了多个Hook(如useCodeBlockCombobox、useCodeBlockElement等)，将相关逻辑直接内聚到组件中，使API更加简洁明了。

升级指南

对于现有项目，升级时需要注意：

1. 移除所有PrismJS相关配置和依赖
2. 安装并配置Lowlight和Highlight.js
3. 检查自定义的代码块组件，确保与新的高亮逻辑兼容
4. 考虑设置defaultLanguage以提供更好的默认体验

性能对比

新架构在多个方面表现出色：

• 启动时间：减少了约40%的初始化时间
• 内存占用：降低了约35%的内存使用
• 渲染性能：复杂代码块的渲染速度提升显著

总结

这次Plate代码块插件的重大升级，体现了项目团队对性能和开发者体验的不懈追求。通过采用更现代的Highlight.js技术栈，不仅解决了长期存在的技术债务，还为未来的功能扩展奠定了更坚实的基础。对于开发者而言，升级后的插件配置更简单、性能更好、功能更稳定，值得所有使用Plate的团队进行评估和升级。