高亮器（Highlighter）完全指南
嘿，朋友！今天咱们来聊聊”高亮器”这个听起来简单、但其实用处超多的工具。不管你是学生、程序员还是普通上班族，高亮器都能帮上大忙。我会从几个方面带你全面了解它，保证让你看完就能上手用！
🖍️ 一、现实中的荧光笔：学生党的必备神器
说到高亮笔，最先想到的肯定是学生时代。记得以前考试前疯狂划重点，荧光黄、荧光粉、荧光绿铺满一整本书的画面吗？
1.1 为什么荧光笔这么受欢迎？
科学依据来了！ 心理学家早就研究发现，使用荧光笔标注重点内容，能显著提高记忆效率。原因很简单：
- 视觉聚焦：荧光色特别醒目，能把你的注意力快速引导到关键信息上
- 主动学习：划线这个动作本身就是一种”加工信息”的过程，比被动阅读效果好得多
- 复习快捷：下次复习时，一眼就能定位到重要内容，不用重新通读全文
1.2 荧光笔的正确使用技巧
很多小伙伴用荧光笔有个误区：把整段话都涂满！这样其实效果很差，因为到处都是重点就等于没有重点。
正确做法：
| 方法 | 说明 | 效果 |
|---|---|---|
| 关键词标记法 | 只划每个句子的核心词 | 快速定位，重点突出 |
| 颜色分类法 | 不同颜色代表不同类型 | 红色=定义，蓝色=例子，绿色=结论 |
| 层级标记法 | 一级重点用亮色，二级用浅色 | 层次分明，复习效率高 |
举个实际例子：
假设你在读一篇关于”光合作用”的文章：
原文段落：
“光合作用是绿色植物利用光能，将二氧化碳和水转化为有机物（主要是葡萄糖）并释放氧气的过程。这个过程主要发生在叶绿体中，分为光反应和暗反应两个阶段。”
用荧光笔标注：
- 光合作用 ← 核心概念，用黄色
- 光能、二氧化碳、水 ← 关键物质，用橙色
- 叶绿体 ← 发生场所，用绿色
- 光反应、暗反应 ← 重要阶段，用粉色
这样复习时，扫一眼就知道：光合作用需要光能、二氧化碳和水，在叶绿体里进行，分两个阶段。一目了然！
1.3 不同场景的荧光笔推荐
学生党必备：
- 晨光/得力荧光笔套装：性价比高，6色一组，够用一学期
- 三菱 Uni-ball：书写顺滑，颜色鲜艳不晕染，适合在笔记本上画
办公族推荐：
- Pilot Hi-Power-C：笔尖细，适合在文件上做精细标注
- Stabilo Boss：德国品牌，颜色选择多，纸质兼容性好
设计师/编辑专用：
- Copic Multiliner：专业级，颜色精准，适合需要精确标注的工作
💻 二、代码编辑器中的语法高亮：程序员的日常
对于程序员来说，”高亮”这个词可能更常出现在代码编辑器里。语法高亮（Syntax Highlighting）是编程体验的基础设施，没有它，代码看起来就是一堆乱码。
2.1 什么是语法高亮？
语法高亮是指代码编辑器根据语言的语法规则，给不同类别的文本赋予不同颜色。比如：
- 关键字（
if,for,return）通常是蓝色或紫色 - 字符串（
"hello world"）通常是红色或绿色 - 注释（
# 这是注释）通常是灰色或绿色 - 数字（
42,3.14）通常是橙色
为什么要这么做？
想象一下，你盯着这样一段代码看：
if(x>5){return x*2;}else{return 0;}
是不是很容易看花眼？但如果加上语法高亮：
if(x > 5) {
return x * 2;
} else {
return 0;
}
颜色会让不同部分立刻区分开来，大脑处理速度提升至少30%。这是有研究支持的！
2.2 主流编辑器的语法高亮配置
VS Code：
VS Code 是目前最流行的代码编辑器，它的语法高亮功能非常强大。
// settings.json 配置示例
{
"editor.tokenColorCustomizations": {
"keywords": "#569CD6", // 蓝色
"strings": "#CE9178", // 橙红色
"comments": "#6A9955", // 绿色
"functions": "#DCDCAA", // 黄色
"numbers": "#B5CEA8" // 浅绿色
}
}
Visual Studio：
VS 的语法高亮支持主题切换：
工具 → 选项 → 环境 → 字体和颜色
在这里你可以调整每种代码元素的颜色。建议初学者使用”深色主题”，对眼睛更友好。
JetBrains 系列（IntelliJ IDEA, PyCharm 等）：
File → Settings → Editor → Color Scheme
JetBrains 的默认配色方案就很专业，但如果你不喜欢，可以自定义。有个小技巧：把”关键字”设为蓝色，”字符串”设为红色，这是最经典的配色，大部分程序员都习惯这种。
2.3 语法高亮的底层原理
很多人好奇，编辑器是怎么知道哪些是关键字、哪些是字符串的？
答案就是词法分析（Lexical Analysis）。
简单来说，编辑器会先用正则表达式把代码”切”成不同的”词”（Token），然后给每种 Token 分配颜色。
举个 Python 例子：
code = "def hello(): return 'hi'"
词法分析器会把它切成：
def← 关键字，蓝色hello← 函数名，黄色()← 符号，灰色return← 关键字，蓝色'hi'← 字符串，红色
然后编辑器根据这些分类，给不同部分上色。
伪代码实现：
function highlight(code, language) {
const tokens = tokenize(code, language);
let highlighted = '';
for (const token of tokens) {
switch (token.type) {
case 'keyword':
highlighted += `<span style="color: blue;">${token.value}</span>`;
break;
case 'string':
highlighted += `<span style="color: red;">${token.value}</span>`;
break;
case 'comment':
highlighted += `<span style="color: gray;">${token.value}</span>`;
break;
default:
highlighted += token.value;
}
}
return highlighted;
}
2.4 好用的语法高亮库
如果你是开发者，想在自己的项目里实现语法高亮，下面这些库值得推荐：
Prism.js - 轻量级，支持300+种语言
<!-- 使用方式超简单 -->
<link rel="stylesheet" href="prism.css">
<script src="prism.js"></script>
<pre><code class="language-python">
def hello():
print("Hello, World!")
</code></pre>
Highlight.js - 自动检测语言
<link rel="stylesheet" href="styles/github.css">
<script src="highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<pre><code>
const name = "张三";
console.log(name);
</code></pre>
CodePen / JSFiddle - 在线调试时自动高亮，适合分享代码。
🌐 三、网页开发中的高亮效果
除了代码编辑器，网页上也经常需要高亮效果。比如搜索结果高亮、表单验证提示、重要信息提醒等。
3.1 CSS 实现高亮效果
基础高亮：
.highlight {
background-color: yellow;
color: black;
padding: 2px 4px;
border-radius: 3px;
}
渐变高亮（更现代）：
.highlight-gradient {
background: linear-gradient(120deg, #fef08a 0%, #fde047 100%);
padding: 2px 6px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
脉冲高亮（吸引注意）：
@keyframes pulse-highlight {
0%, 100% { background-color: #fef08a; }
50% { background-color: #fbbf24; }
}
.highlight-pulse {
animation: pulse-highlight 2s infinite;
padding: 2px 6px;
border-radius: 4px;
}
3.2 JavaScript 实现搜索高亮
这是一个很实用的功能：用户在搜索框输入关键词，页面上所有匹配的内容都会被高亮显示。
class Highlighter {
constructor(container) {
this.container = document.querySelector(container);
this.originalContent = this.container.innerHTML;
}
highlight(keyword) {
// 清除之前的高亮
this.container.innerHTML = this.originalContent;
if (!keyword.trim()) return;
// 创建正则表达式，忽略大小写
const regex = new RegExp(keyword, 'gi');
// 使用 replace 替换匹配的内容
const html = this.container.innerHTML.replace(regex,
match => `<mark class="highlight">${match}</mark>`
);
this.container.innerHTML = html;
}
clear() {
this.container.innerHTML = this.originalContent;
}
}
// 使用示例
const highlighter = new Highlighter('.article-content');
document.getElementById('searchInput').addEventListener('input', (e) => {
const keyword = e.target.value;
if (keyword) {
highlighter.highlight(keyword);
} else {
highlighter.clear();
}
});
HTML 结构：
<input type="text" id="searchInput" placeholder="输入关键词搜索...">
<div class="article-content">
<p>这是第一段文字，里面包含了一些重要的信息。</p>
<p>这是第二段文字，也包含了一些重要内容。</p>
<p>这是第三段文字，继续描述相关的内容。</p>
</div>
效果： 当用户在输入框输入”重要”时，所有包含”重要”的地方都会被黄色高亮标记。
3.3 真实项目中的高亮应用场景
1. 富文本编辑器中的高亮功能
很多笔记应用（如 Notion、Obsidian）都有文本高亮功能。实现方式：
// 使用 execCommand 实现高亮
function highlightText() {
document.execCommand('hiliteColor', false, '#ffff00');
}
// 更现代的方式：使用 Selection API
function highlightSelection(color = '#ffff00') {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const span = document.createElement('span');
span.className = 'highlight';
span.style.backgroundColor = color;
range.surroundContents(span);
}
}
2. 在线文档协作高亮
类似 Google Docs 的多人协作高亮：
class CollaborativeHighlighter {
constructor(documentId) {
this.documentId = documentId;
this.highlights = new Map(); // userId -> highlight data
}
addHighlight(userId, selection, color) {
const highlightData = {
userId,
color,
range: this.getSelectionRange(selection),
timestamp: Date.now()
};
this.highlights.set(`${userId}-${Date.now()}`, highlightData);
this.renderHighlight(highlightData);
this.syncToServer(highlightData);
}
renderHighlight(data) {
// 在 DOM 上渲染高亮
const span = document.createElement('span');
span.className = `highlight-${data.color}`;
span.dataset.userId = data.userId;
// 插入到选区位置
data.range.surroundContents(span);
}
syncToServer(data) {
// 发送到服务器，其他用户实时更新
fetch('/api/highlights', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
}
}
3. 数据可视化中的高亮
在图表中，鼠标悬停时高亮对应数据点：
// 使用 D3.js 实现数据高亮
const chart = d3.select('#chart');
chart.selectAll('.bar')
.on('mouseover', function(event, d) {
// 高亮当前条
d3.select(this)
.transition()
.duration(200)
.attr('fill', '#ff6b6b')
.attr('opacity', 1);
// 淡化其他条
chart.selectAll('.bar')
.filter(function() { return this !== d3.select(this).node(); })
.transition()
.duration(200)
.attr('opacity', 0.3);
})
.on('mouseout', function() {
// 恢复原状
chart.selectAll('.bar')
.transition()
.duration(200)
.attr('fill', '#4ecdc4')
.attr('opacity', 1);
});
🔧 四、开发一个简易高亮工具
既然我们聊了这么多高亮的原理和应用，不如亲手做一个简单的网页高亮工具？这样你能更深入理解它的工作方式。
4.1 项目结构
highlighter-tool/
├── index.html
├── style.css
└── script.js
4.2 HTML 结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易高亮工具</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>✨ 高亮工具</h1>
<div class="toolbar">
<input type="text" id="keyword" placeholder="输入关键词...">
<select id="color">
<option value="#ffff00">黄色</option>
<option value="#00ff00">绿色</option>
<option value="#00bfff">蓝色</option>
<option value="#ff69b4">粉色</option>
<option value="#ff4500">橙色</option>
</select>
<button id="highlightBtn">高亮</button>
<button id="clearBtn">清除</button>
</div>
<div class="content-area">
<textarea id="inputText" placeholder="在此输入或粘贴文本..."></textarea>
<div id="output" class="highlighted-content"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
4.3 CSS 样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 2.5em;
}
.toolbar {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
#keyword {
flex: 1;
min-width: 200px;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}
#keyword:focus {
outline: none;
border-color: #667eea;
}
#color {
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
}
button {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
#highlightBtn {
background: #667eea;
color: white;
}
#highlightBtn:hover {
background: #5568d3;
transform: translateY(-2px);
}
#clearBtn {
background: #f0f0f0;
color: #333;
}
#clearBtn:hover {
background: #e0e0e0;
}
.content-area {
display: flex;
flex-direction: column;
gap: 20px;
}
textarea {
width: 100%;
min-height: 200px;
padding: 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
line-height: 1.6;
resize: vertical;
}
textarea:focus {
outline: none;
border-color: #667eea;
}
.highlighted-content {
padding: 20px;
background: #fafafa;
border: 2px solid #e0e0e0;
border-radius: 8px;
min-height: 200px;
line-height: 1.8;
font-size: 16px;
}
.highlight {
padding: 2px 4px;
border-radius: 4px;
font-weight: bold;
}
.stats {
text-align: center;
color: #666;
margin-top: 10px;
font-size: 14px;
}
4.4 JavaScript 逻辑
class HighlightTool {
constructor() {
this.keywordInput = document.getElementById('keyword');
this.colorSelect = document.getElementById('color');
this.highlightBtn = document.getElementById('highlightBtn');
this.clearBtn = document.getElementById('clearBtn');
this.inputText = document.getElementById('inputText');
this.output = document.getElementById('output');
this.bindEvents();
}
bindEvents() {
this.highlightBtn.addEventListener('click', () => this.highlight());
this.clearBtn.addEventListener('click', () => this.clear());
// 支持回车快捷键
this.keywordInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') this.highlight();
});
}
highlight() {
const keyword = this.keywordInput.value.trim();
const color = this.colorSelect.value;
const text = this.inputText.value;
if (!keyword) {
this.showError('请输入关键词');
return;
}
if (!text) {
this.showError('请输入文本内容');
return;
}
// 转义 HTML 特殊字符，防止 XSS
const escapedText = this.escapeHtml(text);
// 创建正则表达式，全局匹配且忽略大小写
const regex = new RegExp(this.escapeRegExp(keyword), 'gi');
// 统计匹配次数
const matches = text.match(regex);
const count = matches ? matches.length : 0;
// 替换并高亮
const highlighted = escapedText.replace(regex, match => {
return `<span class="highlight" style="background-color: ${color}">${match}</span>`;
});
// 显示结果
this.output.innerHTML = highlighted;
// 显示统计
this.showStats(count);
}
clear() {
this.output.innerHTML = '';
this.inputText.value = '';
this.keywordInput.value = '';
this.keywordInput.focus();
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
showError(message) {
// 简单抖动动画提示
this.output.style.animation = 'shake 0.5s';
setTimeout(() => {
this.output.style.animation = '';
}, 500);
// 显示错误信息
const errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
errorDiv.textContent = message;
errorDiv.style.cssText = `
color: #e74c3c;
background: #fadbd8;
padding: 10px;
border-radius: 6px;
margin-top: 10px;
text-align: center;
`;
// 移除之前的错误信息
const existingError = this.output.nextElementSibling;
if (existingError && existingError.classList.contains('error-message')) {
existingError.remove();
}
this.output.after(errorDiv);
setTimeout(() => errorDiv.remove(), 3000);
}
showStats(count) {
// 移除之前的统计
const existingStats = this.output.nextElementSibling;
if (existingStats && existingStats.classList.contains('stats')) {
existingStats.remove();
}
const statsDiv = document.createElement('div');
statsDiv.className = 'stats';
statsDiv.textContent = `找到 ${count} 处匹配`;
this.output.after(statsDiv);
}
}
// 添加抖动动画
const style = document.createElement('style');
style.textContent = `
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
`;
document.head.appendChild(style);
// 初始化
document.addEventListener('DOMContentLoaded', () => {
new HighlightTool();
});
4.5 使用教程
第一步：准备文本 在左侧的文本框里输入或粘贴你想处理的文字。可以是文章、笔记、代码片段，什么都行。
第二步：输入关键词 在输入框里写上你要高亮的关键词。比如你想找出所有关于”机器学习”的内容，就输入”机器学习”。
第三步：选择颜色 下拉菜单里有5种颜色可选。建议：
- 黄色：一般重点
- 绿色：重要概念
- 蓝色：定义或术语
- 粉色：例子或说明
- 橙色：结论或建议
第四步：点击”高亮” 按下按钮，或者按回车键，结果会立刻显示在下方。
第五步：查看统计 高亮完成后，下方会显示找到多少处匹配。
4.6 进阶功能扩展
如果你想让这个工具更强大，可以考虑添加以下功能：
1. 多关键词同时高亮
highlightMultiple(keywords, color) {
let text = this.inputText.value;
keywords.forEach(keyword => {
const regex = new RegExp(this.escapeRegExp(keyword), 'gi');
text = text.replace(regex, match => {
return `<span class="highlight" style="background-color: ${color}">${match}</span>`;
});
});
this.output.innerHTML = text;
}
2. 保存高亮结果
saveResult() {
const result = {
content: this.output.innerHTML,
timestamp: new Date().toISOString(),
keyword: this.keywordInput.value
};
// 保存到 localStorage
localStorage.setItem('highlightResult', JSON.stringify(result));
// 或者下载为 HTML 文件
const blob = new Blob([`
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>高亮结果</title></head>
<body>${this.output.innerHTML}</body>
</html>
`], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'highlight-result.html';
a.click();
}
3. 撤销/重做功能
class HistoryManager {
constructor() {
this.history = [];
this.currentIndex = -1;
}
push(state) {
// 截断当前的重做历史
this.history = this.history.slice(0, this.currentIndex + 1);
this.history.push(state);
this.currentIndex++;
}
undo() {
if (this.currentIndex > 0) {
this.currentIndex--;
return this.history[this.currentIndex];
}
return null;
}
redo() {
if (this.currentIndex < this.history.length - 1) {
this.currentIndex++;
return this.history[this.currentIndex];
}
return null;
}
}
🎓 五、教育场景中的高亮应用
高亮工具在教育领域的应用非常广泛，不仅能帮助学生，也能让老师轻松备课。
5.1 学生自学指南
场景：备考复习
小明正在准备期末考试，有厚厚一本复习资料。他用了我们刚才做的高亮工具：
第一步：分类高亮
- 黄色：所有定义
- 绿色：所有公式
- 粉色：所有例题
- 蓝色：所有结论
第二步：关键词搜索 把”光合作用”输入搜索框，工具把所有相关段落都高亮出来，方便快速定位。
第三步：生成复习卡片 用工具导出高亮后的文本，打印成小卡片，随时复习。
效果： 原本需要3小时复习的内容，现在1小时就能搞定，因为重点一目了然。
5.2 教师备课工具
场景：整理教案
李老师要上一堂关于”环保”的公开课。她这样做：
- 把教材内容复制到高亮工具里
- 用不同颜色标记：
- 红色：需要重点讲解的内容
- 绿色：可以略讲的内容
- 蓝色：可以让学生讨论的内容
- 根据高亮结果，合理规划课堂时间分配
效果： 教案准备时间减少50%，课堂重点更突出。
5.3 语言学习辅助
场景：英语学习
小张想提高阅读理解能力。他这样做：
- 找一篇英文文章，复制到工具里
- 输入生词列表，批量高亮所有生词
- 查看高亮后的文章，了解生词分布和频率
JavaScript 实现：
class VocabularyHighlighter {
constructor() {
this.vocabulary = new Set();
}
addWords(words) {
words.forEach(word => this.vocabulary.add(word.toLowerCase()));
}
highlight(text) {
let highlighted = text;
this.vocabulary.forEach(word => {
const regex = new RegExp(`\\b${this.escapeRegExp(word)}\\b`, 'gi');
highlighted = highlighted.replace(regex, match => {
return `<span class="vocab-word" style="background-color: #ffeb3b;">${match}</span>`;
});
});
return highlighted;
}
escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
}
// 使用示例
const vocabHighlighter = new VocabularyHighlighter();
vocabHighlighter.addWords(['algorithm', 'function', 'variable', 'string', 'array']);
const article = `An algorithm is a function that processes a string variable and returns an array.`;
const result = vocabHighlighter.highlight(article);
console.log(result);
// 输出：An <span class="vocab-word">algorithm</span> is a <span class="vocab-word">function</span> that processes a <span class="vocab-word">string</span> <span class="vocab-word">variable</span> and returns an <span class="vocab-word">array</span>.
🚀 六、实际项目案例
6.1 在线笔记应用中的高亮功能
需求： 用户可以在笔记中选中文字，点击按钮高亮。
实现思路：
class NoteHighlighter {
constructor(noteElement) {
this.note = noteElement;
this.highlights = [];
}
highlightSelection(color) {
const selection = window.getSelection();
if (selection.isCollapsed) {
alert('请先选中要高亮的文字');
return;
}
const range = selection.getRangeAt(0);
const span = document.createElement('span');
span.className = 'note-highlight';
span.style.backgroundColor = color;
span.dataset.id = this.generateId();
try {
range.surroundContents(span);
this.highlights.push({
id: span.dataset.id,
color: color,
text: range.toString(),
timestamp: Date.now()
});
} catch (e) {
alert('选区跨越了多个元素，无法高亮');
}
}
generateId() {
return 'hl-' + Math.random().toString(36).substr(2, 9);
}
removeHighlight(id) {
const highlight = document.querySelector(`[data-id="${id}"]`);
if (highlight) {
const text = document.createTextNode(highlight.textContent);
highlight.parentNode.replaceChild(text, highlight);
highlight.normalize();
this.highlights = this.highlights.filter(h => h.id !== id);
}
}
exportHighlights() {
return JSON.stringify(this.highlights, null, 2);
}
}
6.2 代码审查工具中的差异高亮
需求： 对比两个版本的代码，显示差异并高亮。
实现思路：
class DiffHighlighter {
constructor() {
this.diffLines = [];
}
compare(oldCode, newCode) {
const oldLines = oldCode.split('\n');
const newLines = newCode.split('\n');
const maxLines = Math.max(oldLines.length, newLines.length);
const diff = [];
for (let i = 0; i < maxLines; i++) {
const oldLine = oldLines[i] || '';
const newLine = newLines[i] || '';
if (oldLine === newLine) {
diff.push({ type: 'same', content: oldLine });
} else {
if (oldLine) {
diff.push({ type: 'removed', content: oldLine });
}
if (newLine) {
diff.push({ type: 'added', content: newLine });
}
}
}
return diff;
}
renderDiff(diff) {
let html = '<div class="diff-container">';
diff.forEach(line => {
switch (line.type) {
case 'added':
html += `<div class="diff-line added">${this.escapeHtml(line.content)}</div>`;
break;
case 'removed':
html += `<div class="diff-line removed">${this.escapeHtml(line.content)}</div>`;
break;
case 'same':
html += `<div class="diff-line same">${this.escapeHtml(line.content)}</div>`;
break;
}
});
html += '</div>';
return html;
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
}
CSS 样式：
.diff-container {
font-family: 'Consolas', monospace;
font-size: 14px;
line-height: 1.6;
}
.diff-line {
padding: 4px 8px;
white-space: pre-wrap;
word-break: break-all;
}
.diff-line.added {
background-color: #d4edda;
color: #155724;
border-left: 3px solid #28a745;
}
.diff-line.removed {
background-color: #f8d7da;
color: #721c24;
border-left: 3px solid #dc3545;
}
.diff-line.same {
background-color: #f8f9fa;
color: #6c757d;
}
6.3 电子书阅读器中的高亮标注
需求： 用户可以在电子书中划重点，并导出笔记。
实现思路：
class EbookHighlighter {
constructor(bookElement) {
this.book = bookElement;
this.highlights = [];
this.selectionStart = null;
this.bindEvents();
}
bindEvents() {
this.book.addEventListener('mouseup', (e) => this.handleSelection(e));
// 创建浮动工具栏
this.toolbar = this.createToolbar();
document.body.appendChild(this.toolbar);
}
createToolbar() {
const toolbar = document.createElement('div');
toolbar.className = 'highlight-toolbar';
toolbar.innerHTML = `
<button class="hl-btn" data-color="#ffff00">黄</button>
<button class="hl-btn" data-color="#00ff00">绿</button>
<button class="hl-btn" data-color="#00bfff">蓝</button>
<button class="hl-btn clear">清除</button>
`;
toolbar.querySelectorAll('.hl-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const color = e.target.dataset.color;
if (color) {
this.applyHighlight(color);
} else {
this.clearHighlight();
}
});
});
return toolbar;
}
handleSelection(e) {
const selection = window.getSelection();
if (selection.toString().length > 0) {
const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect();
// 显示工具栏
this.toolbar.style.display = 'flex';
this.toolbar.style.left = `${rect.left + rect.width / 2 - 80}px`;
this.toolbar.style.top = `${rect.top - 40}px`;
this.selectionRange = range.cloneRange();
} else {
this.toolbar.style.display = 'none';
}
}
applyHighlight(color) {
if (!this.selectionRange) return;
const span = document.createElement('span');
span.className = 'ebook-highlight';
span.style.backgroundColor = color;
span.dataset.color = color;
span.dataset.timestamp = Date.now();
try {
this.selectionRange.surroundContents(span);
this.highlights.push({
text: this.selectionRange.toString(),
color: color,
timestamp: span.dataset.timestamp,
location: this.book.scrollTop
});
this.toolbar.style.display = 'none';
window.getSelection().removeAllRanges();
} catch (e) {
alert('选区无效，请重新选择');
}
}
clearHighlight() {
const highlights = this.book.querySelectorAll('.ebook-highlight');
highlights.forEach(span => {
const text = document.createTextNode(span.textContent);
span.parentNode.replaceChild(text, span);
text.normalize();
});
this.highlights = [];
this.toolbar.style.display = 'none';
}
exportNotes() {
return this.highlights.map(h => ({
text: h.text,
color: h.color,
timestamp: h.timestamp,
location: h.location
}));
}
}
📊 七、高亮技术的性能优化
当处理大量文本时，高亮功能可能会变慢。以下是一些优化技巧：
7.1 使用 Web Worker 进行异步处理
// worker.js
self.onmessage = function(e) {
const { text, keyword, color } = e.data;
const escapedText = escapeHtml(text);
const regex = new RegExp(escapeRegExp(keyword), 'gi');
const matches = text.match(regex);
const count = matches ? matches.length : 0;
const highlighted = escapedText.replace(regex,
match => `<span class="highlight" style="background-color: ${color}">${match}</span>`
);
self.postMessage({ highlighted, count });
};
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
// 主线程
class AsyncHighlighter {
constructor() {
this.worker = new Worker('worker.js');
this.worker.onmessage = (e) => {
this.onHighlightComplete(e.data);
};
}
highlight(text, keyword, color) {
// 显示加载状态
this.showLoading();
this.worker.postMessage({ text, keyword, color });
}
onHighlightComplete(data) {
this.hideLoading();
this.renderResult(data.highlighted, data.count);
}
showLoading() {
document.getElementById('output').textContent = '正在处理...';
}
hideLoading() {
document.getElementById('output').classList.remove('loading');
}
renderResult(html, count) {
document.getElementById('output').innerHTML = html;
document.getElementById('stats').textContent = `找到 ${count} 处匹配`;
}
}
7.2 虚拟滚动优化
当文本特别长时，可以使用虚拟滚动只渲染可见区域：
class VirtualScrollHighlighter {
constructor(container, text, keyword, color) {
this.container = container;
this.text = text;
this.keyword = keyword;
this.color = color;
this.lineHeight = 24; // 每行高度
this.visibleLines = 20; // 可视区域行数
this.scrollTop = 0;
this.init();
}
init() {
this.container.style.overflow = 'auto';
this.container.style.position = 'relative';
this.container.style.height = `${this.visibleLines * this.lineHeight}px`;
// 创建虚拟容器
this.virtualContainer = document.createElement('div');
this.virtualContainer.style.height = `${this.text.split('\n').length * this.lineHeight}px`;
this.container.appendChild(this.virtualContainer);
this.render();
this.container.addEventListener('scroll', () => this.onScroll());
}
render() {
const startLine = Math.floor(this.scrollTop / this.lineHeight);
const endLine = startLine + this.visibleLines;
const visibleText = this.text.split('\n').slice(startLine, endLine).join('\n');
const highlighted = this.highlightText(visibleText);
const offset = startLine * this.lineHeight;
this.virtualContainer.innerHTML = `
<div style="height: ${offset}px;"></div>
<div style="padding: 0 10px;">${highlighted}</div>
`;
}
highlightText(text) {
const escaped = this.escapeHtml(text);
const regex = new RegExp(this.escapeRegExp(this.keyword), 'gi');
return escaped.replace(regex,
match => `<span class="highlight" style="background-color: ${this.color}">${match}</span>`
);
}
onScroll() {
this.scrollTop = this.container.scrollTop;
this.render();
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
}
7.3 防抖优化
当用户实时搜索时，避免频繁触发高亮：
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// 使用示例
const debouncedHighlight = debounce((keyword, color) => {
highlighter.highlight(keyword, color);
}, 300); // 300ms 防抖
document.getElementById('keyword').addEventListener('input', (e) => {
debouncedHighlight(e.target.value, document.getElementById('color').value);
});
💡 八、高亮功能的设计原则
好的高亮功能应该遵循以下原则：
8.1 对比度优先
高亮颜色的选择很重要。要确保高亮后的文字清晰可读。
推荐配色：
| 背景色 | 文字色 | 适用场景 |
|---|---|---|
| 浅黄色 (#fff9c4) | 深黑色 | 通用 |
| 浅绿色 (#c8e6c9) | 深绿色 | 重点内容 |
| 浅蓝色 (#bbdefb) | 深蓝色 | 定义术语 |
| 浅粉色 (#f8bbd9) | 深粉色 | 特殊标记 |
| 浅橙色 (#ffe0b2) | 深橙色 | 警告提示 |
8.2 不过度高亮
记住：高亮的目的是突出重点，不是填满页面。
- 单个页面高亮内容不超过 20%
- 关键词最多保留 3-5 个颜色
- 避免使用太鲜艳的颜色（如荧光绿、亮红色）
8.3 提供撤销能力
用户可能会误操作，一定要提供撤销功能：
class UndoableHighlighter {
constructor() {
this.history = [];
this.redoStack = [];
}
highlight(text, keyword, color) {
// 保存当前状态到历史
this.history.push({
type: 'highlight',
text: text,
keyword: keyword,
color: color,
timestamp: Date.now()
});
this.redoStack = [];
return this.applyHighlight(text, keyword, color);
}
undo() {
if (this.history.length === 0) return null;
const lastAction = this.history.pop();
this.redoStack.push(lastAction);
// 恢复之前的状态
return this.restoreState(lastAction.previousState);
}
redo() {
if (this.redoStack.length === 0) return null;
const action = this.redoStack.pop();
this.history.push(action);
return this.applyHighlight(action.text, action.keyword, action.color);
}
}
8.4 支持导出和分享
高亮完成后，用户可能想要保存或分享结果：
class ExportHighlighter {
static exportAsHtml(highlighter) {
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高亮结果</title>
<style>
.highlight { padding: 2px 4px; border-radius: 3px; }
body { font-family: sans-serif; line-height: 1.6; padding: 20px; }
</style>
</head>
<body>
${highlighter.output}
</body>
</html>
`;
return html;
}
static exportAsMarkdown(highlighter) {
// 转换为 Markdown 格式
return `**高亮结果**\n\n` +
highlighter.text.replace(/\*\*(.*?)\*\*/g, '**$1**');
}
static downloadFile(content, filename, mimeType) {
const blob = new Blob([content], { type: mimeType });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
}
// 使用示例
const highlighter = new HighlightTool();
const htmlContent = ExportHighlighter.exportAsHtml(highlighter);
ExportHighlighter.downloadFile(htmlContent, 'highlight-result.html', 'text/html');
🔮 九、未来趋势：AI 驱动的智能高亮
传统的关键词高亮已经不够用了。未来的高亮技术会更智能：
9.1 语义高亮
使用 AI 理解文本含义，自动高亮重要内容：
class SemanticHighlighter {
constructor() {
this.aiModel = null;
}
async loadModel() {
// 加载预训练的 NLP 模型
this.aiModel = await import('transformers');
}
async highlightSemantic(text) {
// 使用 AI 分析文本重要性
const analysis = await this.aiModel.pipeline('token-classification')(text);
// 根据重要性评分高亮
let highlighted = text;
analysis.forEach(token => {
if (token.score > 0.8) {
// 高亮重要内容
highlighted = highlighted.replace(
token.word,
`<mark style="background-color: #ffeb3b;">${token.word}</mark>`
);
}
});
return highlighted;
}
}
9.2 个性化高亮
根据用户的学习习惯和偏好，自动调整高亮策略：
class PersonalizedHighlighter {
constructor(userId) {
this.userId = userId;
this.userProfile = this.loadUserProfile();
}
loadUserProfile() {
// 从服务器或本地存储加载用户偏好
return {
preferredColors: ['#ffff00', '#00ff00', '#00bfff'],
highlightIntensity: 'medium', // low, medium, high
autoHighlight: true,
categories: {
definition: { color: '#ff6b6b', priority: 'high' },
example: { color: '#4ecdc4', priority: 'medium' },
conclusion: { color: '#45b7d1', priority: 'high' }
}
};
}
highlight(text, keyword) {
const profile = this.userProfile;
// 根据用户偏好调整高亮策略
const color = profile.preferredColors[0];
const opacity = profile.highlightIntensity === 'high' ? 1 : 0.7;
const regex = new RegExp(this.escapeRegExp(keyword), 'gi');
return text.replace(regex, match => {
return `<span class="highlight" style="background-color: ${color}; opacity: ${opacity};">${match}</span>`;
});
}
learnFromFeedback(highlightId, effectiveness) {
// 根据用户反馈调整高亮策略
const feedback = { highlightId, effectiveness, timestamp: Date.now() };
this.saveFeedback(feedback);
this.updatePreferences(feedback);
}
updatePreferences(feedback) {
// 根据反馈调整颜色、强度等
if (feedback.effectiveness === 'low') {
// 降低当前颜色的使用频率
this.decreaseColorUsage(feedback.highlightId.color);
}
}
}
9.3 实时协作高亮
多人同时编辑和标注，实时更新：
class RealtimeHighlighter {
constructor(roomId) {
this.roomId = roomId;
this.socket = io(roomId);
this.highlights = new Map();
}
join() {
this.socket.emit('join', { userId: this.getUserId() });
this.socket.on('highlight_add', (data) => {
this.addHighlight(data);
});
this.socket.on('highlight_remove', (data) => {
this.removeHighlight(data.id);
});
this.socket.on('highlight_update', (data) => {
this.updateHighlight(data);
});
}
addHighlight(data) {
const span = document.createElement('span');
span.className = 'collab-highlight';
span.dataset.userId = data.userId;
span.dataset.color = data.color;
span.textContent = data.text;
// 插入到文档中
this.insertAtRange(span, data.range);
// 存储引用
this.highlights.set(data.id, { element: span, data: data });
}
insertAtRange(element, range) {
range.deleteContents();
range.insertNode(element);
range.setStartAfter(element);
range.setEndAfter(element);
}
getUserId() {
// 生成唯一用户ID
return 'user-' + Math.random().toString(36).substr(2, 9);
}
}
📝 十、总结与最佳实践
高亮功能虽然看似简单，但要做好需要考虑很多方面：
10.1 核心要点回顾
- 物理荧光笔：颜色分类、关键词标记、层级标注
- 代码高亮：语法分析、主题配置、实时预览
- 网页高亮：CSS 样式、JS 交互、性能优化
- 教育应用：学生自学、教师备课、语言学习
- 未来趋势：AI 语义理解、个性化、实时协作
10.2 实用技巧清单
给学生党：
- ✓ 用不同颜色区分不同类型的内容
- ✓ 只高亮关键词，不要整段涂满
- ✓ 定期清理过时的高亮
- ✓ 导出高亮笔记，方便复习
给程序员：
- ✓ 选择合适的语法高亮主题
- ✓ 自定义常用关键字的颜色
- ✓ 使用插件扩展高亮功能
- ✓ 注意高亮性能，避免卡顿
给设计师：
- ✓ 保证高亮色与页面整体风格协调
- ✓ 注意对比度，确保可读性
- ✓ 提供取消高亮的选项
- ✓ 考虑无障碍访问需求
10.3 推荐工具汇总
| 场景 | 推荐工具 | 特点 |
|---|---|---|
| 纸质标注 | 三菱荧光笔 | 颜色鲜艳，不晕染 |
| 代码编辑 | VS Code + Prism.js | 功能强大，插件丰富 |
| 网页开发 | Highlight.js | 自动检测语言，轻量级 |
| 在线笔记 | Notion | 内置高亮功能，支持多人协作 |
| 电子书 | Kindle | 高亮同步，导出笔记 |
最后，我想说：高亮是一种态度，不是负担。 好的高亮习惯能帮你事半功倍，坏的高亮习惯只会让页面变成彩虹，什么都看不清。记住”少即是多”的原则，让高亮真正为你服务！
如果你有任何问题或者想分享你的高亮技巧，欢迎在评论区留言哦！😊
高亮器（Highlighter）完全指南
嘿，朋友！今天咱们来聊聊”高亮器”这个听起来简单、但其实用处超多的工具。不管你是学生、程序员还是普通上班族，高亮器都能帮上大忙。我会从几个方面带你全面了解它，保证让你看完就能上手用！
🖍️ 一、现实中的荧光笔：学生党的必备神器
说到高亮笔，最先想到的肯定是学生时代。记得以前考试前疯狂划重点，荧光黄、荧光粉、荧光绿铺满一整本书的画面吗？
1.1 为什么荧光笔这么受欢迎？
科学依据来了！ 心理学家早就研究发现，使用荧光笔标注重点内容，能显著提高记忆效率。原因很简单：
- 视觉聚焦：荧光色特别醒目，能把你的注意力快速引导到关键信息上
- 主动学习：划线这个动作本身就是一种”加工信息”的过程，比被动阅读效果好得多
- 复习快捷：下次复习时，一眼就能定位到重要内容，不用重新通读全文
1.2 荧光笔的正确使用技巧
很多小伙伴用荧光笔有个误区：把整段话都涂满！这样其实效果很差，因为到处都是重点就等于没有重点。
正确做法：
| 方法 | 说明 | 效果 |
|---|---|---|
| 关键词标记法 | 只划每个句子的核心词 | 快速定位，重点突出 |
| 颜色分类法 | 不同颜色代表不同类型 | 红色=定义，蓝色=例子，绿色=结论 |
| 层级标记法 | 一级重点用亮色，二级用浅色 | 层次分明，复习效率高 |
举个实际例子：
假设你在读一篇关于”光合作用”的文章：
原文段落：
“光合作用是绿色植物利用光能，将二氧化碳和水转化为有机物（主要是葡萄糖）并释放氧气的过程。这个过程主要发生在叶绿体中，分为光反应和暗反应两个阶段。”
用荧光笔标注：
- 光合作用 ← 核心概念，用黄色
- 光能、二氧化碳、水 ← 关键物质，用橙色
- 叶绿体 ← 发生场所，用绿色
- 光反应、暗反应 ← 重要阶段，用粉色
这样复习时，扫一眼就知道：光合作用需要光能、二氧化碳和水，在叶绿体里进行，分两个阶段。一目了然！
1.3 不同场景的荧光笔推荐
学生党必备：
- 晨光/得力荧光笔套装：性价比高，6色一组，够用一学期
- 三菱 Uni-ball：书写顺滑，颜色鲜艳不晕染，适合在笔记本上画
办公族推荐：
- Pilot Hi-Power-C：笔尖细，适合在文件上做精细标注
- Stabilo Boss：德国品牌，颜色选择多，纸质兼容性好
设计师/编辑专用：
- Copic Multiliner：专业级，颜色精准，适合需要精确标注的工作
💻 二、代码编辑器中的语法高亮：程序员的日常
对于程序员来说，”高亮”这个词可能更常出现在代码编辑器里。语法高亮（Syntax Highlighting）是编程体验的基础设施，没有它，代码看起来就是一堆乱码。
2.1 什么是语法高亮？
语法高亮是指代码编辑器根据语言的语法规则，给不同类别的文本赋予不同颜色。比如：
- 关键字（
if,for,return）通常是蓝色或紫色 - 字符串（
"hello world"）通常是红色或绿色 - 注释（
# 这是注释）通常是灰色或绿色 - 数字（
42,3.14）通常是橙色
为什么要这么做？
想象一下，你盯着这样一段代码看：
if(x>5){return x*2;}else{return 0;}
是不是很容易看花眼？但如果加上语法高亮：
if(x > 5) {
return x * 2;
} else {
return 0;
}
颜色会让不同部分立刻区分开来，大脑处理速度提升至少30%。这是有研究支持的！
2.2 主流编辑器的语法高亮配置
VS Code：
VS Code 是目前最流行的代码编辑器，它的语法高亮功能非常强大。
// settings.json 配置示例
{
"editor.tokenColorCustomizations": {
"keywords": "#569CD6", // 蓝色
"strings": "#CE9178", // 橙红色
"comments": "#6A9955", // 绿色
"functions": "#DCDCAA", // 黄色
"numbers": "#B5CEA8" // 浅绿色
}
}
Visual Studio：
VS 的语法高亮支持主题切换：
工具 → 选项 → 环境 → 字体和颜色
在这里你可以调整每种代码元素的颜色。建议初学者使用”深色主题”，对眼睛更友好。
JetBrains 系列（IntelliJ IDEA, PyCharm 等）：
File → Settings → Editor → Color Scheme
JetBrains 的默认配色方案就很专业，但如果你不喜欢，可以自定义。有个小技巧：把”关键字”设为蓝色，”字符串”设为红色，这是最经典的配色，大部分程序员都习惯这种。
2.3 语法高亮的底层原理
很多人好奇，编辑器是怎么知道哪些是关键字、哪些是字符串的？
答案就是词法分析（Lexical Analysis）。
简单来说，编辑器会先用正则表达式把代码”切”成不同的”词”（Token），然后给每种 Token 分配颜色。
举个 Python 例子：
code = "def hello(): return 'hi'"
词法分析器会把它切成：
def← 关键字，蓝色hello← 函数名，黄色()← 符号，灰色return← 关键字，蓝色'hi'← 字符串，红色
然后编辑器根据这些分类，给不同部分上色。
伪代码实现：
function highlight(code, language) {
const tokens = tokenize(code, language);
let highlighted = '';
for (const token of tokens) {
switch (token.type) {
case 'keyword':
highlighted += `<span style="color: blue;">${token.value}</span>`;
break;
case 'string':
highlighted += `<span style="color: red;">${token.value}</span>`;
break;
case 'comment':
highlighted += `<span style="color: gray;">${token.value}</span>`;
break;
default:
highlighted += token.value;
}
}
return highlighted;
}
2.4 好用的语法高亮库
如果你是开发者，想在自己的项目里实现语法高亮，下面这些库值得推荐：
Prism.js - 轻量级，支持300+种语言
<!-- 使用方式超简单 -->
<link rel="stylesheet" href="prism.css">
<script src="prism.js"></script>
<pre><code class="language-python">
def hello():
print("Hello, World!")
</code></pre>
Highlight.js - 自动检测语言
<link rel="stylesheet" href="styles/github.css">
<script src="highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<pre><code>
const name = "张三";
console.log(name);
</code></pre>
CodePen / JSFiddle - 在线调试时自动高亮，适合分享代码。
🌐 三、网页开发中的高亮效果
除了代码编辑器，网页上也经常需要高亮效果。比如搜索结果高亮、表单验证提示、重要信息提醒等。
3.1 CSS 实现高亮效果
基础高亮：
.highlight {
background-color: yellow;
color: black;
padding: 2px 4px;
border-radius: 3px;
}
渐变高亮（更现代）：
.highlight-gradient {
background: linear-gradient(120deg, #fef08a 0%, #fde047 100%);
padding: 2px 6px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
脉冲高亮（吸引注意）：
@keyframes pulse-highlight {
0%, 100% { background-color: #fef08a; }
50% { background-color: #fbbf24; }
}
.highlight-pulse {
animation: pulse-highlight 2s infinite;
padding: 2px 6px;
border-radius: 4px;
}
3.2 JavaScript 实现搜索高亮
这是一个很实用的功能：用户在搜索框输入关键词，页面上所有匹配的内容都会被高亮显示。
class Highlighter {
constructor(container) {
this.container = document.querySelector(container);
this.originalContent = this.container.innerHTML;
}
highlight(keyword) {
// 清除之前的高亮
this.container.innerHTML = this.originalContent;
if (!keyword.trim()) return;
// 创建正则表达式，忽略大小写
const regex = new RegExp(keyword, 'gi');
// 使用 replace 替换匹配的内容
const html = this.container.innerHTML.replace(regex,
match => `<mark class="highlight">${match}</mark>`
);
this.container.innerHTML = html;
}
clear() {
this.container.innerHTML = this.originalContent;
}
}
// 使用示例
const highlighter = new Highlighter('.article-content');
document.getElementById('searchInput').addEventListener('input', (e) => {
const keyword = e.target.value;
if (keyword) {
highlighter.highlight(keyword);
} else {
highlighter.clear();
}
});
HTML 结构：
<input type="text" id="searchInput" placeholder="输入关键词搜索...">
<div class="article-content">
<p>这是第一段文字，里面包含了一些重要的信息。</p>
<p>这是第二段文字，也包含了一些重要内容。</p>
<p>这是第三段文字，继续描述相关的内容。</p>
</div>
效果： 当用户在输入框输入”重要”时，所有包含”重要”的地方都会被黄色高亮标记。
3.3 真实项目中的高亮应用场景
1. 富文本编辑器中的高亮功能
很多笔记应用（如 Notion、Obsidian）都有文本高亮功能。实现方式：
// 使用 execCommand 实现高亮
function highlightText() {
document.execCommand('hiliteColor', false, '#ffff00');
}
// 更现代的方式：使用 Selection API
function highlightSelection(color = '#ffff00') {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const span = document.createElement('span');
span.className = 'highlight';
span.style.backgroundColor = color;
range.surroundContents(span);
}
}
2. 在线文档协作高亮
类似 Google Docs 的多人协作高亮：
class CollaborativeHighlighter {
constructor(documentId) {
this.documentId = documentId;
this.highlights = new Map(); // userId -> highlight data
}
addHighlight(userId, selection, color) {
const highlightData = {
userId,
color,
range: this.getSelectionRange(selection),
timestamp: Date.now()
};
this.highlights.set(`${userId}-${Date.now()}`, highlightData);
this.renderHighlight(highlightData);
this.syncToServer(highlightData);
}
renderHighlight(data) {
// 在 DOM 上渲染高亮
const span = document.createElement('span');
span.className = `highlight-${data.color}`;
span.dataset.userId = data.userId;
// 插入到选区位置
data.range.surroundContents(span);
}
syncToServer(data) {
// 发送到服务器，其他用户实时更新
fetch('/api/highlights', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
}
}
3. 数据可视化中的高亮
在图表中，鼠标悬停时高亮对应数据点：
// 使用 D3.js 实现数据高亮
const chart = d3.select('#chart');
chart.selectAll('.bar')
.on('mouseover', function(event, d) {
// 高亮当前条
d3.select(this)
.transition()
.duration(200)
.attr('fill', '#ff6b6b')
.attr('opacity', 1);
// 淡化其他条
chart.selectAll('.bar')
.filter(function() { return this !== d3.select(this).node(); })
.transition()
.duration(200)
.attr('opacity', 0.3);
})
.on('mouseout', function() {
// 恢复原状
chart.selectAll('.bar')
.transition()
.duration(200)
.attr('fill', '#4ecdc4')
.attr('opacity', 1);
});
🔧 四、开发一个简易高亮工具
既然我们聊了这么多高亮的原理和应用，不如亲手做一个简单的网页高亮工具？这样你能更深入理解它的工作方式。
4.1 项目结构
highlighter-tool/
├── index.html
├── style.css
└── script.js
4.2 HTML 结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易高亮工具</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>✨ 高亮工具</h1>
<div class="toolbar">
<input type="text" id="keyword" placeholder="输入关键词...">
<select id="color">
<option value="#ffff00">黄色</option>
<option value="#00ff00">绿色</option>
<option value="#00bfff">蓝色</option>
<option value="#ff69b4">粉色</option>
<option value="#ff4500">橙色</option>
</select>
<button id="highlightBtn">高亮</button>
<button id="clearBtn">清除</button>
</div>
<div class="content-area">
<textarea id="inputText" placeholder="在此输入或粘贴文本..."></textarea>
<div id="output" class="highlighted-content"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
4.3 CSS 样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 2.5em;
}
.toolbar {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
#keyword {
flex: 1;
min-width: 200px;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}
#keyword:focus {
outline: none;
border-color: #667eea;
}
#color {
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
}
button {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
#highlightBtn {
background: #667eea;
color: white;
}
#highlightBtn:hover {
background: #5568d3;
transform: translateY(-2px);
}
#clearBtn {
background: #f0f0f0;
color: #333;
}
#clearBtn:hover {
background: #e0e0e0;
}
.content-area {
display: flex;
flex-direction: column;
gap: 20px;
}
textarea {
width: 100%;
min-height: 200px;
padding: 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
line-height: 1.6;
resize: vertical;
}
textarea:focus {
outline: none;
border-color: #667eea;
}
.highlighted-content {
padding: 20px;
background: #fafafa;
border: 2px solid #e0e0e0;
border-radius: 8px;
min-height: 200px;
line-height: 1.8;
font-size: 16px;
}
.highlight {
padding: 2px 4px;
border-radius: 4px;
font-weight: bold;
}
.stats {
text-align: center;
color: #666;
margin-top: 10px;
font-size: 14px;
}
4.4 JavaScript 逻辑
class HighlightTool {
constructor() {
this.keywordInput = document.getElementById('keyword');
this.colorSelect = document.getElementById('color');
this.highlightBtn = document.getElementById('highlightBtn');
this.clearBtn = document.getElementById('clearBtn');
this.inputText = document.getElementById('inputText');
this.output = document.getElementById('output');
this.bindEvents();
}
bindEvents() {
this.highlightBtn.addEventListener('click', () => this.highlight());
this.clearBtn.addEventListener('click', () => this.clear());
// 支持回车快捷键
this.keywordInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') this.highlight();
});
}
highlight() {
const keyword = this.keywordInput.value.trim();
const color = this.colorSelect.value;
const text = this.inputText.value;
if (!keyword) {
this.showError('请输入关键词');
return;
}
if (!text) {
this.showError('请输入文本内容');
return;
}
// 转义 HTML 特殊字符，防止 XSS
const escapedText = this.escapeHtml(text);
// 创建正则表达式，全局匹配且忽略大小写
const regex = new RegExp(this.escapeRegExp(keyword), 'gi');
// 统计匹配次数
const matches = text.match(regex);
const count = matches ? matches.length : 0;
// 替换并高亮
const highlighted = escapedText.replace(regex, match => {
return `<span class="highlight" style="background-color: ${color}">${match}</span>`;
});
// 显示结果
this.output.innerHTML = highlighted;
// 显示统计
this.showStats(count);
}
clear() {
this.output.innerHTML = '';
this.inputText.value = '';
this.keywordInput.value = '';
this.keywordInput.focus();
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
showError(message) {
// 简单抖动动画提示
this.output.style.animation = 'shake 0.5s';
setTimeout(() => {
this.output.style.animation = '';
}, 500);
// 显示错误信息
const errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
errorDiv.textContent = message;
errorDiv.style.cssText = `
color: #e74c3c;
background: #fadbd8;
padding: 10px;
border-radius: 6px;
margin-top: 10px;
text-align: center;
`;
// 移除之前的错误信息
const existingError = this.output.nextElementSibling;
if (existingError && existingError.classList.contains('error-message')) {
existingError.remove();
}
this.output.after(errorDiv);
setTimeout(() => errorDiv.remove(), 3000);
}
showStats(count) {
// 移除之前的统计
const existingStats = this.output.nextElementSibling;
if (existingStats && existingStats.classList.contains('stats')) {
existingStats.remove();
}
const statsDiv = document.createElement('div');
statsDiv.className = 'stats';
statsDiv.textContent = `找到 ${count} 处匹配`;
this.output.after(statsDiv);
}
}
// 添加抖动动画
const style = document.createElement('style');
style.textContent = `
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
`;
document.head.appendChild(style);
// 初始化
document.addEventListener('DOMContentLoaded', () => {
new HighlightTool();
});
4.5 使用教程
第一步：准备文本 在左侧的文本框里输入或粘贴你想处理的文字。可以是文章、笔记、代码片段，什么都行。
第二步：输入关键词 在输入框里写上你要高亮的关键词。比如你想找出所有关于”机器学习”的内容，就输入”机器学习”。
第三步：选择颜色 下拉菜单里有5种颜色可选。建议：
- 黄色：一般重点
- 绿色：重要概念
- 蓝色：定义或术语
- 粉色：例子或说明
- 橙色：结论或建议
第四步：点击”高亮” 按下按钮，或者按回车键，结果会立刻显示在下方。
第五步：查看统计 高亮完成后，下方会显示找到多少处匹配。
4.6 进阶功能扩展
如果你想让这个工具更强大，可以考虑添加以下功能：
1. 多关键词同时高亮
highlightMultiple(keywords, color) {
let text = this.inputText.value;
keywords.forEach(keyword => {
const regex = new RegExp(this.escapeRegExp(keyword), 'gi');
text = text.replace(regex, match => {
return `<span class="highlight" style="background-color: ${color}">${match}</span>`;
});
});
this.output.innerHTML = text;
}
2. 保存高亮结果
saveResult() {
const result = {
content: this.output.innerHTML,
timestamp: new Date().toISOString(),
keyword: this.keywordInput.value
};
// 保存到 localStorage
localStorage.setItem('highlightResult', JSON.stringify(result));
// 或者下载为 HTML 文件
const blob = new Blob([`
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>高亮结果</title></head>
<body>${this.output.innerHTML}</body>
</html>
`], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'highlight-result.html';
a.click();
}
3. 撤销/重做功能
class HistoryManager {
constructor() {
this.history = [];
this.currentIndex = -1;
}
push(state) {
// 截断当前的重做历史
this.history = this.history.slice(0, this.currentIndex + 1);
this.history.push(state);
this.currentIndex++;
}
undo() {
if (this.currentIndex > 0) {
this.currentIndex--;
return this.history[this.currentIndex];
}
return null;
}
redo() {
if (this.currentIndex < this.history.length - 1) {
this.currentIndex++;
return this.history[this.currentIndex];
}
return null;
}
}
🎓 五、教育场景中的高亮应用
高亮工具在教育领域的应用非常广泛，不仅能帮助学生，也能让老师轻松备课。
5.1 学生自学指南
场景：备考复习
小明正在准备期末考试，有厚厚一本复习资料。他用了我们刚才做的高亮工具：
第一步：分类高亮
- 黄色：所有定义
- 绿色：所有公式
- 粉色：所有例题
- 蓝色：所有结论
第二步：关键词搜索 把”光合作用”输入搜索框，工具把所有相关段落都高亮出来，方便快速定位。
第三步：生成复习卡片 用工具导出高亮后的文本，打印成小卡片，随时复习。
效果： 原本需要3小时复习的内容，现在1小时就能搞定，因为重点一目了然。
5.2 教师备课工具
场景：整理教案
李老师要上一堂关于”环保”的公开课。她这样做：
- 把教材内容复制到高亮工具里
- 用不同颜色标记：
- 红色：需要重点讲解的内容
- 绿色：可以略讲的内容
- 蓝色：可以让学生讨论的内容
- 根据高亮结果，合理规划课堂时间分配
效果： 教案准备时间减少50%，课堂重点更突出。
5.3 语言学习辅助
场景：英语学习
小张想提高阅读理解能力。他这样做：
- 找一篇英文文章，复制到工具里
- 输入生词列表，批量高亮所有生词
- 查看高亮后的文章，了解生词分布和频率
JavaScript 实现：
class VocabularyHighlighter {
constructor() {
this.vocabulary = new Set();
}
addWords(words) {
words.forEach(word => this.vocabulary.add(word.toLowerCase()));
}
highlight(text) {
let highlighted = text;
this.vocabulary.forEach(word => {
const regex = new RegExp(`\\b${this.escapeRegExp(word)}\\b`, 'gi');
highlighted = highlighted.replace(regex, match => {
return `<span class="vocab-word" style="background-color: #ffeb3b;">${match}</span>`;
});
});
return highlighted;
}
escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
}
// 使用示例
const vocabHighlighter = new VocabularyHighlighter();
vocabHighlighter.addWords(['algorithm', 'function', 'variable', 'string', 'array']);
const article = `An algorithm is a function that processes a string variable and returns an array.`;
const result = vocabHighlighter.highlight(article);
console.log(result);
// 输出：An <span class="vocab-word">algorithm</span> is a <span class="vocab-word">function</span> that processes a <span class="vocab-word">string</span> <span class="vocab-word">variable</span> and returns an <span class="vocab-word">array</span>.
🚀 六、实际项目案例
6.1 在线笔记应用中的高亮功能
需求： 用户可以在笔记中选中文字，点击按钮高亮。
实现思路：
class NoteHighlighter {
constructor(noteElement) {
this.note = noteElement;
this.highlights = [];
}
highlightSelection(color) {
const selection = window.getSelection();
if (selection.isCollapsed) {
alert('请先选中要高亮的文字');
return;
}
const range = selection.getRangeAt(0);
const span = document.createElement('span');
span.className = 'note-highlight';
span.style.backgroundColor = color;
span.dataset.id = this.generateId();
try {
range.surroundContents(span);
this.highlights.push({
id: span.dataset.id,
color: color,
text: range.toString(),
timestamp: Date.now()
});
} catch (e) {
alert('选区跨越了多个元素，无法高亮');
}
}
generateId() {
return 'hl-' + Math.random().toString(36).substr(2, 9);
}
removeHighlight(id) {
const highlight = document.querySelector(`[data-id="${id}"]`);
if (highlight) {
const text = document.createTextNode(highlight.textContent);
highlight.parentNode.replaceChild(text, highlight);
highlight.normalize();
this.highlights = this.highlights.filter(h => h.id !== id);
}
}
exportHighlights() {
return JSON.stringify(this.highlights, null, 2);
}
}
6.2 代码审查工具中的差异高亮
需求： 对比两个版本的代码，显示差异并高亮。
实现思路：
class DiffHighlighter {
constructor() {
this.diffLines = [];
}
compare(oldCode, newCode) {
const oldLines = oldCode.split('\n');
const newLines = newCode.split('\n');
const maxLines = Math.max(oldLines.length, newLines.length);
const diff = [];
for (let i = 0; i < maxLines; i++) {
const oldLine = oldLines[i] || '';
const newLine = newLines[i] || '';
if (oldLine === newLine) {
diff.push({ type: 'same', content: oldLine });
} else {
if (oldLine) {
diff.push({ type: 'removed', content: oldLine });
}
if (newLine) {
diff.push({ type: 'added', content: newLine });
}
}
}
return diff;
}
renderDiff(diff) {
let html = '<div class="diff-container">';
diff.forEach(line => {
switch (line.type) {
case 'added':
html += `<div class="diff-line added">${this.escapeHtml(line.content)}</div>`;
break;
case 'removed':
html += `<div class="diff-line removed">${this.escapeHtml(line.content)}</div>`;
break;
case 'same':
html += `<div class="diff-line same">${this.escapeHtml(line.content)}</div>`;
break;
}
});
html += '</div>';
return html;
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
}
CSS 样式：
.diff-container {
font-family: 'Consolas', monospace;
font-size: 14px;
line-height: 1.6;
}
.diff-line {
padding: 4px 8px;
white-space: pre-wrap;
word-break: break-all;
}
.diff-line.added {
background-color: #d4edda;
color: #155724;
border-left: 3px solid #28a745;
}
.diff-line.removed {
background-color: #f8d7da;
color: #721c24;
border-left: 3px solid #dc3545;
}
.diff-line.same {
background-color: #f8f9fa;
color: #6c757d;
}
6.3 电子书阅读器中的高亮标注
需求： 用户可以在电子书中划重点，并导出笔记。
实现思路：
class EbookHighlighter {
constructor(bookElement) {
this.book = bookElement;
this.highlights = [];
this.selectionStart = null;
this.bindEvents();
}
bindEvents() {
this.book.addEventListener('mouseup', (e) => this.handleSelection(e));
// 创建浮动工具栏
this.toolbar = this.createToolbar();
document.body.appendChild(this.toolbar);
}
createToolbar() {
const toolbar = document.createElement('div');
toolbar.className = 'highlight-toolbar';
toolbar.innerHTML = `
<button class="hl-btn" data-color="#ffff00">黄</button>
<button class="hl-btn" data-color="#00ff00">绿</button>
<button class="hl-btn" data-color="#00bfff">蓝</button>
<button class="hl-btn clear">清除</button>
`;
toolbar.querySelectorAll('.hl-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const color = e.target.dataset.color;
if (color) {
this.applyHighlight(color);
} else {
this.clearHighlight();
}
});
});
return toolbar;
}
handleSelection(e) {
const selection = window.getSelection();
if (selection.toString().length > 0) {
const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect();
// 显示工具栏
this.toolbar.style.display = 'flex';
this.toolbar.style.left = `${rect.left + rect.width / 2 - 80}px`;
this.toolbar.style.top = `${rect.top - 40}px`;
this.selectionRange = range.cloneRange();
} else {
this.toolbar.style.display = 'none';
}
}
applyHighlight(color) {
if (!this.selectionRange) return;
const span = document.createElement('span');
span.className = 'ebook-highlight';
span.style.backgroundColor = color;
span.dataset.color = color;
span.dataset.timestamp = Date.now();
try {
this.selectionRange.surroundContents(span);
this.highlights.push({
text: this.selectionRange.toString(),
color: color,
timestamp: span.dataset.timestamp,
location: this.book.scrollTop
});
this.toolbar.style.display = 'none';
window.getSelection().removeAllRanges();
} catch (e) {
alert('选区无效，请重新选择');
}
}
clearHighlight() {
const highlights = this.book.querySelectorAll('.ebook-highlight');
highlights.forEach(span => {
const text = document.createTextNode(span.textContent);
span.parentNode.replaceChild(text, span);
text.normalize();
});
this.highlights = [];
this.toolbar.style.display = 'none';
}
exportNotes() {
return this.highlights.map(h => ({
text: h.text,
color: h.color,
timestamp: h.timestamp,
location: h.location
}));
}
}
📊 七、高亮技术的性能优化
当处理大量文本时，高亮功能可能会变慢。以下是一些优化技巧：
7.1 使用 Web Worker 进行异步处理
// worker.js
self.onmessage = function(e) {
const { text, keyword, color } = e.data;
const escapedText = escapeHtml(text);
const regex = new RegExp(escapeRegExp(keyword), 'gi');
const matches = text.match(regex);
const count = matches ? matches.length : 0;
const highlighted = escapedText.replace(regex,
match => `<span class="highlight" style="background-color: ${color}">${match}</span>`
);
self.postMessage({ highlighted, count });
};
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
// 主线程
class AsyncHighlighter {
constructor() {
this.worker = new Worker('worker.js');
this.worker.onmessage = (e) => {
this.onHighlightComplete(e.data);
};
}
highlight(text, keyword, color) {
// 显示加载状态
this.showLoading();
this.worker.postMessage({ text, keyword, color });
}
onHighlightComplete(data) {
this.hideLoading();
this.renderResult(data.highlighted, data.count);
}
showLoading() {
document.getElementById('output').textContent = '正在处理...';
}
hideLoading() {
document.getElementById('output').classList.remove('loading');
}
renderResult(html, count) {
document.getElementById('output').innerHTML = html;
document.getElementById('stats').textContent = `找到 ${count} 处匹配`;
}
}
7.2 虚拟滚动优化
当文本特别长时，可以使用虚拟滚动只渲染可见区域：
class VirtualScrollHighlighter {
constructor(container, text, keyword, color) {
this.container = container;
this.text = text;
this.keyword = keyword;
this.color = color;
this.lineHeight = 24; // 每行高度
this.visibleLines = 20; // 可视区域行数
this.scrollTop = 0;
this.init();
}
init() {
this.container.style.overflow = 'auto';
this.container.style.position = 'relative';
this.container.style.height = `${this.visibleLines * this.lineHeight}px`;
// 创建虚拟容器
this.virtualContainer = document.createElement('div');
this.virtualContainer.style.height = `${this.text.split('\n').length * this.lineHeight}px`;
this.container.appendChild(this.virtualContainer);
this.render();
this.container.addEventListener('scroll', () => this.onScroll());
}
render() {
const startLine = Math.floor(this.scrollTop / this.lineHeight);
const endLine = startLine + this.visibleLines;
const visibleText = this.text.split('\n').slice(startLine, endLine).join('\n');
const highlighted = this.highlightText(visibleText);
const offset = startLine * this.lineHeight;
this.virtualContainer.innerHTML = `
<div style="height: ${offset}px;"></div>
<div style="padding: 0 10px;">${highlighted}</div>
`;
}
highlightText(text) {
const escaped = this.escapeHtml(text);
const regex = new RegExp(this.escapeRegExp(this.keyword), 'gi');
return escaped.replace(regex,
match => `<span class="highlight" style="background-color: ${this.color}">${match}</span>`
);
}
onScroll() {
this.scrollTop = this.container.scrollTop;
this.render();
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
}
7.3 防抖优化
当用户实时搜索时，避免频繁触发高亮：
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// 使用示例
const debouncedHighlight = debounce((keyword, color) => {
highlighter.highlight(keyword, color);
}, 300); // 300ms 防抖
document.getElementById('keyword').addEventListener('input', (e) => {
debouncedHighlight(e.target.value, document.getElementById('color').value);
});
💡 八、高亮功能的设计原则
好的高亮功能应该遵循以下原则：
8.1 对比度优先
高亮颜色的选择很重要。要确保高亮后的文字清晰可读。
推荐配色：
| 背景色 | 文字色 | 适用场景 |
|---|---|---|
| 浅黄色 (#fff9c4) | 深黑色 | 通用 |
| 浅绿色 (#c8e6c9) | 深绿色 | 重点内容 |
| 浅蓝色 (#bbdefb) | 深蓝色 | 定义术语 |
| 浅粉色 (#f8bbd9) | 深粉色 | 特殊标记 |
| 浅橙色 (#ffe0b2) | 深橙色 | 警告提示 |
8.2 不过度高亮
记住：高亮的目的是突出重点，不是填满页面。
- 单个页面高亮内容不超过 20%
- 关键词最多保留 3-5 个颜色
- 避免使用太鲜艳的颜色（如荧光绿、亮红色）
8.3 提供撤销能力
用户可能会误操作，一定要提供撤销功能：
class UndoableHighlighter {
constructor() {
this.history = [];
this.redoStack = [];
}
highlight(text, keyword, color) {
// 保存当前状态到历史
this.history.push({
type: 'highlight',
text: text,
keyword: keyword,
color: color,
timestamp: Date.now()
});
this.redoStack = [];
return this.applyHighlight(text, keyword, color);
}
undo() {
if (this.history.length === 0) return null;
const lastAction = this.history.pop();
this.redoStack.push(lastAction);
// 恢复之前的状态
return this.restoreState(lastAction.previousState);
}
redo() {
if (this.redoStack.length === 0) return null;
const action = this.redoStack.pop();
this.history.push(action);
return this.applyHighlight(action.text, action.keyword, action.color);
}
}
8.4 支持导出和分享
高亮完成后，用户可能想要保存或分享结果：
class ExportHighlighter {
static exportAsHtml(highlighter) {
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高亮结果</title>
<style>
.highlight { padding: 2px 4px; border-radius: 3px; }
body { font-family: sans-serif; line-height: 1.6; padding: 20px; }
</style>
</head>
<body>
${highlighter.output}
</body>
</html>
`;
return html;
}
static exportAsMarkdown(highlighter) {
// 转换为 Markdown 格式
return `**高亮结果**\n\n` +
highlighter.text.replace(/\*\*(.*?)\*\*/g, '**$1**');
}
static downloadFile(content, filename, mimeType) {
const blob = new Blob([content], { type: mimeType });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
}
// 使用示例
const highlighter = new HighlightTool();
const htmlContent = ExportHighlighter.exportAsHtml(highlighter);
ExportHighlighter.downloadFile(htmlContent, 'highlight-result.html', 'text/html');
🔮 九、未来趋势：AI 驱动的智能高亮
传统的关键词高亮已经不够用了。未来的高亮技术会更智能：
9.1 语义高亮
使用 AI 理解文本含义，自动高亮重要内容：
class SemanticHighlighter {
constructor() {
this.aiModel = null;
}
async loadModel() {
// 加载预训练的 NLP 模型
this.aiModel = await import('transformers');
}
async highlightSemantic(text) {
// 使用 AI 分析文本重要性
const analysis = await this.aiModel.pipeline('token-classification')(text);
// 根据重要性评分高亮
let highlighted = text;
analysis.forEach(token => {
if (token.score > 0.8) {
// 高亮重要内容
highlighted = highlighted.replace(
token.word,
`<mark style="background-color: #ffeb3b;">${token.word}</mark>`
);
}
});
return highlighted;
}
}
9.2 个性化高亮
根据用户的学习习惯和偏好，自动调整高亮策略：
class PersonalizedHighlighter {
constructor(userId) {
this.userId = userId;
this.userProfile = this.loadUserProfile();
}
loadUserProfile() {
// 从服务器或本地存储加载用户偏好
return {
preferredColors: ['#ffff00', '#00ff00', '#00bfff'],
highlightIntensity: 'medium', // low, medium, high
autoHighlight: true,
categories: {
definition: { color: '#ff6b6b', priority: 'high' },
example: { color: '#4ecdc4', priority: 'medium' },
conclusion: { color: '#45b7d1', priority: 'high' }
}
};
}
highlight(text, keyword) {
const profile = this.userProfile;
// 根据用户偏好调整高亮策略
const color = profile.preferredColors[0];
const opacity = profile.highlightIntensity === 'high' ? 1 : 0.7;
const regex = new RegExp(this.escapeRegExp(keyword), 'gi');
return text.replace(regex, match => {
return `<span class="highlight" style="background-color: ${color}; opacity: ${opacity};">${match}</span>`;
});
}
learnFromFeedback(highlightId, effectiveness) {
// 根据用户反馈调整高亮策略
const feedback = { highlightId, effectiveness, timestamp: Date.now() };
this.saveFeedback(feedback);
this.updatePreferences(feedback);
}
updatePreferences(feedback) {
// 根据反馈调整颜色、强度等
if (feedback.effectiveness === 'low') {
// 降低当前颜色的使用频率
this.decreaseColorUsage(feedback.highlightId.color);
}
}
}
9.3 实时协作高亮
多人同时编辑和标注，实时更新：
class RealtimeHighlighter {
constructor(roomId) {
this.roomId = roomId;
this.socket = io(roomId);
this.highlights = new Map();
}
join() {
this.socket.emit('join', { userId: this.getUserId() });
this.socket.on('highlight_add', (data) => {
this.addHighlight(data);
});
this.socket.on('highlight_remove', (data) => {
this.removeHighlight(data.id);
});
this.socket.on('highlight_update', (data) => {
this.updateHighlight(data);
});
}
addHighlight(data) {
const span = document.createElement('span');
span.className = 'collab-highlight';
span.dataset.userId = data.userId;
span.dataset.color = data.color;
span.textContent = data.text;
// 插入到文档中
this.insertAtRange(span, data.range);
// 存储引用
this.highlights.set(data.id, { element: span, data: data });
}
insertAtRange(element, range) {
range.deleteContents();
range.insertNode(element);
range.setStartAfter(element);
range.setEndAfter(element);
}
getUserId() {
// 生成唯一用户ID
return 'user-' + Math.random().toString(36).substr(2, 9);
}
}
📝 十、总结与最佳实践
高亮功能虽然看似简单，但要做好需要考虑很多方面：
10.1 核心要点回顾
- 物理荧光笔：颜色分类、关键词标记、层级标注
- 代码高亮：语法分析、主题配置、实时预览
- 网页高亮：CSS 样式、JS 交互、性能优化
- 教育应用：学生自学、教师备课、语言学习
- 未来趋势：AI 语义理解、个性化、实时协作
10.2 实用技巧清单
给学生党：
- ✓ 用不同颜色区分不同类型的内容
- ✓ 只高亮关键词，不要整段涂满
- ✓ 定期清理过时的高亮
- ✓ 导出高亮笔记，方便复习
给程序员：
- ✓ 选择合适的语法高亮主题
- ✓ 自定义常用关键字的颜色
- ✓ 使用插件扩展高亮功能
- ✓ 注意高亮性能，避免卡顿
给设计师：
- ✓ 保证高亮色与页面整体风格协调
- ✓ 注意对比度，确保可读性
- ✓ 提供取消高亮的选项
- ✓ 考虑无障碍访问需求
10.3 推荐工具汇总
| 场景 | 推荐工具 | 特点 |
|---|---|---|
| 纸质标注 | 三菱荧光笔 | 颜色鲜艳，不晕染 |
| 代码编辑 | VS Code + Prism.js | 功能强大，插件丰富 |
| 网页开发 | Highlight.js | 自动检测语言，轻量级 |
| 在线笔记 | Notion | 内置高亮功能，支持多人协作 |
| 电子书 | Kindle | 高亮同步，导出笔记 |
最后，我想说：高亮是一种态度，不是负担。 好的高亮习惯能帮你事半功倍，坏的高亮习惯只会让页面变成彩虹，什么都看不清。记住”少即是多”的原则，让高亮真正为你服务！
如果你有任何问题或者想分享你的高亮技巧，欢迎在评论区留言哦！😊