从基础到进阶：Halo 2.19+ 代码高亮功能全面升级指南

从基础到进阶：Halo 2.19+ 代码高亮功能全面升级指南

【免费下载链接】halo 强大易用的开源建站工具。 项目地址: https://gitcode.com/GitHub_Trending/ha/halo

功能变更概述

Halo 2.19+ 版本对代码高亮功能进行了重构，提供了更灵活的颜色选择机制和用户交互体验。本次更新涉及工具栏组件、上下文菜单和颜色管理系统的多处调整，主要实现文件包括：

• 工具栏组件：ui/packages/editor/src/extensions/highlight/HighlightToolbarItem.vue
• 上下文菜单：ui/packages/editor/src/extensions/highlight/HighlightBubbleItem.vue

核心功能改进

1. 自定义颜色选择器

新版本引入了 ColorPickerDropdown 组件，允许用户通过调色板选择任意高亮颜色。关键实现代码如下：

<ColorPickerDropdown @update:model-value="handleSetColor">
  <ToolbarItem v-bind="props" @click="handleSetColor()" />
  <!-- 预设颜色选项 -->
  <div class="p-1">
    <div class="h-5 w-5 rounded-sm" :style="{ 'background-color': '#fff8c5' }"></div>
    <span>{{ i18n.global.t("editor.common.button.restore_default") }}</span>
  </div>
</ColorPickerDropdown>

2. 双向绑定API

通过 setHighlight 和 unsetHighlight 方法实现高亮状态的精确控制：

// 设置高亮颜色
function handleSetColor(color?: string) {
  props.editor
    ?.chain()
    .focus()
    .setHighlight(color ? { color } : undefined)
    .run();
}

// 取消高亮
function handleUnsetColor() {
  props.editor?.chain().focus().unsetHighlight().run();
}

3. 多场景支持

同时支持工具栏快速访问和选中文本后的上下文菜单触发，满足不同编辑习惯：

• 工具栏入口：通过格式工具栏的高亮按钮直接打开颜色选择面板
• 上下文菜单：选中文本后通过悬浮菜单访问高亮功能

使用指南

基本操作流程

1. 在编辑器中选中需要高亮的文本内容
2. 点击工具栏中的高亮按钮或通过右键菜单选择高亮功能
3. 从颜色面板中选择预设颜色或自定义颜色值
4. 如需取消高亮，点击"清除高亮"按钮或选择无颜色选项

快捷键支持

当前版本暂未设置默认快捷键，用户可通过 系统设置 自定义快捷键组合。

技术实现解析

状态管理

采用 Tiptap 编辑器的 chain 命令模式，确保操作的可撤销性和状态一致性：

// 状态切换核心逻辑
props.editor?.chain().focus().toggleHighlight({ color }).run();

国际化支持

所有交互文本均通过 i18n 系统实现多语言支持：

<span class="text-xs text-gray-600">
  {{ i18n.global.t("editor.extensions.highlight.unset") }}
</span>

迁移注意事项

对于从旧版本升级的用户，原有的固定颜色高亮将自动转换为新的默认黄色（#fff8c5）。如需批量调整历史内容的高亮样式，可参考 扩展开发指南 开发自定义迁移工具。

未来规划

根据社区反馈，团队计划在后续版本中添加：

• 自定义预设颜色集
• 高亮样式导出/导入
• 语法高亮与文本高亮的联动功能

更多功能更新请关注 官方文档 和版本发布日志。

【免费下载链接】halo 强大易用的开源建站工具。 项目地址: https://gitcode.com/GitHub_Trending/ha/halo