怎么在网页上添加重点的画笔

在网页上画重点，网页最直接的上添办法不是截图后开PS，而是加重给浏览器装一个叫“Epic Pen”的插件。这玩意儿能让你的画笔鼠标变成一支荧光笔，直接在页面上圈圈画画，网页跟老师在投影仪上划重点一个道理。上添我用它给客户演示网页改版方案时，加重直接圈出导航栏的画笔间距问题，对方秒懂，网页省了来回截图的上添废话。

但插件有个毛病——只能自己看，加重别人打不开你的画笔标注。要是网页想把带重点的网页发给同事，就得用另一招：浏览器自带的上添“网页截图+标注”功能。拿Chrome举例，加重按F12打开开发者工具，点开右上角的“三个点”菜单，选“Capture full size screenshot”，截完图后系统会弹出个画图工具，你就能用红框、箭头、高亮笔在图上做标记了。这功能藏在开发者模式里，很多人用了十年浏览器都不知道。

有人会问，那我不想截图，就想让网页本身带着标注，能行吗？行，用CSS。在地址栏前加“view-source:”查看网页源代码，找到你想高亮的文字所在的HTML标签，比如<p>或<span>，给它们加上这样一段样式：background-color: yellow; font-weight: bold;。保存后刷新页面，那行字就变成黄底加粗了。不过这招只对你自己电脑上的本地文件有效，在线网页改完一刷新就没了——除非你用浏览器插件“Stylus”来持久化注入CSS，那又是另一个故事。

最硬核的做法，是用JavaScript写个书签脚本。在浏览器收藏夹里新建一个网址，把这段代码粘进去：javascript:(function(){ var s=document.createElement('style');s.innerHTML='mark{ background:#ff0;padding:2px;border-radius:3px}';document.body.appendChild(s);document.querySelectorAll('p,li,span').forEach(el=>{ if(el.textContent.includes('重点')){ el.innerHTML=el.innerHTML.replace(/重点/g,'重点')}})})()。保存后，打开任意网页点击这个书签，所有含“重点”二字的文本就会自动套上黄色高亮。我写了个自动把招聘页面的薪资数字标红的版本，投简历时一眼扫过去，哪家给得多清清楚楚。

说到底，工具不在多，顺手就行。如果你只是偶尔给朋友发个带圈的截图，浏览器自带截图就够；要是天天做网页评审，Epic Pen的效率无敌；至于CSS和书签脚本，那是给愿意折腾的人准备的——但折腾完你会发现，原来浏览器还能这么玩，那种掌控感比用任何付费软件都爽。