Highlight Block
一个 VS Code 插件，自动识别start和end之间的代码块，然后根据映射表格配置，给他们添加高亮背景颜色和代码折叠效果，类似 Cursor 的代码差异显示效果。
效果展示
| 效果展示 |
配置界面 |
 |
 |
功能特性
- ✨ 支持映射表格配置，不同标记对应不同颜色
- 🎨 类似 Cursor 的代码块背景高亮效果（无边框）
- 🔧 支持
marker-start 到 marker-end 标记格式
- 📝 支持多种注释格式中的标记
- ⚡ 实时更新高亮效果
- 🎯 初始配置为空，需要用户自定义标记和颜色
- 📁 支持代码块折叠功能，可以折叠/展开高亮的代码区域
使用方法
基本用法
使用预置标记：
# warn-start
def deprecated_function():
return "这段代码会显示警告色（橙色）"
# warn-end
# error-start
critical_code = "这行会显示错误色（红色）"
# error-end
# add-start
def new_feature():
return "新增代码会显示绿色"
# add-end
// delete-start
// 这段代码会显示删除色（红色）
const oldCode = () => {
console.log("即将删除的代码");
};
// delete-end
// info-start
const importantInfo = "重要信息会显示蓝色";
// info-end
支持的标记格式
标准格式：marker-start ... marker-end
- 必须使用完整的开始和结束标记对
- 只有匹配到完整的 start-end 对才会进行背景色渲染
- 单独的 start 标记或未配对的标记不会被高亮
代码折叠功能
插件自动为高亮的代码块提供折叠功能：
- 自动检测：完整的
marker-start 到 marker-end 标记对会自动支持折叠
- 折叠操作：点击行号左侧的折叠图标可以折叠/展开代码块
- 快捷键：使用
Ctrl+Shift+[ 折叠，Ctrl+Shift+] 展开
- 配置开关：可通过
highlightBlock.enableFolding 设置启用/禁用
# warn-start ← 点击这里的折叠图标
def complex_function():
# 这里是复杂的代码逻辑
# 可以被折叠隐藏
return "result"
# warn-end
如何配置标记
通过 VS Code 设置界面：
- 打开设置 (
Ctrl+,)
- 搜索 "highlight block"
- 找到 "Color Mappings" 配置项
- 点击"添加项"按钮，在表格中添加标记和颜色
- 左列输入标记名（如：
warn）
- 右列输入颜色值（如：
#ffa50020）
推荐的标记配置：
info: #0080ff20 (蓝色信息)highlight: #ffff0020 (黄色高亮)tip: #4b5a2cff (绿色提示)warn: #ffa50020 (橙色警告)error: #ff000020 (红色错误)success: #00ff0020 (绿色成功)delete: #ff000020 (红色删除)add: #00ff0020 (绿色新增)
注意：插件初始配置为空，需要手动添加所需的标记。
命令
Highlight Block: 切换高亮块 - 切换当前编辑器的高亮状态Highlight Block: 清除所有高亮 - 清除所有编辑器中的高亮Highlight Block: 显示可用标记 - 显示当前配置的所有可用标记
支持的标记格式
插件支持在以下格式中的标记：
- 单行注释：
// warn, # error
- 块注释：
/* info */
- HTML 注释：
<!-- highlight -->
- 字符串：
"delete", 'add'
- 直接文本：
warn-start
配置选项
可以在 VS Code 设置中配置以下选项：
highlightBlock.colorMappings
- 类型：
object
- 描述：标记与颜色的映射配置，在 VS Code 设置界面中以表格形式编辑
- 格式：
{"标记名": "颜色值"}
- 默认值：
tip: #4b5a2cff (绿色提示)info: #0080ff20 (蓝色信息)highlight: #ffff0020 (黄色高亮)warn: #ffa50020 (橙色警告)error: #ff000020 (红色错误)success: #00ff0020 (绿色成功)delete: #ff000020 (红色删除)add: #00ff0020 (绿色新增)
highlightBlock.autoHighlight
- 类型：
boolean
- 默认值：
true
- 描述：是否自动检测并高亮标记块
highlightBlock.enableFolding
- 类型：
boolean
- 默认值：
true
- 描述：为高亮代码块启用折叠功能
配置示例
方式一：通过设置界面（推荐）
- 打开 VS Code 设置界面
- 搜索 "highlight block"
- 在 "Color Mappings" 表格中添加配置项
方式二：直接编辑 settings.json
{
"highlightBlock.colorMappings": {
"info": "#0080ff20",
"highlight": "#ffff0020",
"warn": "#ffa50020",
"error": "#ff000020",
"success": "#00ff0020",
"delete": "#ff000020",
"add": "#00ff0020"
},
"highlightBlock.autoHighlight": true
}
插件会严格匹配标记名称。
添加自定义标记
你可以添加任意自定义标记，比如：
# custom-start
def my_custom_function():
return "自定义标记的代码块"
# custom-end
# note
important_note = "这是一个笔记"
# note-end
安装
- 下载
.vsix 文件
- 在 VS Code 中使用
Extensions: Install from VSIX... 命令安装
开发
# 打包插件
vsce package --allow-missing-repository
许可证
MIT License
更新日志
1.1.0 (2024-08-11)
- 🆕 新增代码折叠功能：高亮的代码块现在支持折叠/展开
- 🔧 添加
HighlightBlockFoldingProvider 折叠范围提供者
- ⚙️ 新增
highlightBlock.enableFolding 配置选项
- 📄 添加
language-configuration.json 语言配置文件
- 🌐 注册折叠范围提供者支持所有文件类型
- 📖 更新文档说明折叠功能使用方法
- 🎯 只对完整的
marker-start 到 marker-end 标记对提供折叠
1.0.2 (2024-08-11)
- 📸 添加设置界面截图
- 📖 更新文档内容和使用说明
- 🎨 优化插件图标显示
1.0.1 (2024-08-11)
- 🎨 添加插件图标
icon.jpg
- 📦 在
package.json 中配置图标引用
- 📖 更新 README.md 显示图标
- 🌐 使用 GitHub 图标链接确保在线显示
1.0.0 (2024-08-11)
- 🚀 初始版本发布
- ✨ 支持映射表格配置的代码块高亮功能
- 🎨 类似 Cursor 的纯背景色高亮效果（无边框）
- 🔧 支持
marker-start 到 marker-end 标记格式
- 📝 支持多种注释格式中的标记检测
- ⚡ 实时更新高亮效果
- 🎯 只渲染完整的标记对，避免未配对标记的意外高亮
- 🛠️ 预置推荐的标记和颜色配置
