标签在Electron中开箱即用，自Electron 1.0+原生支持，但渲染效果受Chromium版本和CSS重置影响；若不显色，需检查computed样式、全局CSS覆盖及preload注入逻辑。
HTML5 的 <mark></mark> 标签在 Electron 桌面应用中完全有效，无需额外配置，但渲染效果取决于 Chromium 版本和 CSS 是否被重置。
Electron 中 <mark></mark> 能否直接使用
可以。Electron 基于 Chromium，而 <mark></mark> 是 HTML5 标准标签，自 Chromium 6+（对应 Electron 1.0+）起原生支持。只要没用 CSS 全局重置掉 mark 样式，它就会以默认黄色背景+黑色文字渲染。
常见干扰点：
- 某些 UI 框架（如 Bootstrap、Tailwind）或自定义
reset.css会把mark的background-color设为transparent，导致“看不见” - Electron 主进程不干预 DOM 渲染，所以标签是否生效，纯看渲染进程（即 Web 页面）的 HTML/CSS 环境
- 不依赖 Node.js API 或
webPreferences配置，开箱即用
本地测试时 <mark></mark> 不显色的排查步骤
在 Electron 窗口中写好 <p>这是<mark>重点内容</mark>。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a>
<p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 却没高亮？按顺序检查：
- 打开开发者工具（
win.webContents.openDevTools()），选中<mark></mark>元素，看Computed面板里background-color是否为rgb(255, 255, 0)（即默认黄色） - 检查是否有全局 CSS 写了
mark { background: none; }或all: initial;类重置规则 - 确认未启用
webPreferences.contextIsolation: true且未误删注入的样式逻辑（极少影响<mark></mark>，但可能干扰自定义高亮方案） - 临时加一行内联样式测试：
<mark style="background: #ffeb3b;">重点</mark>—— 若此时可见，说明是 CSS 覆盖问题
Electron 中比 <mark></mark> 更可控的高亮方案
如果需要统一主题色、适配深色模式或支持动态关键词匹配，<mark></mark> 的局限就明显了：无法通过属性控制颜色，也不支持正则替换后自动包裹。
更实用的做法：
- 用
span+ 自定义 class 替代，例如<span class="highlight">重点</span>，再通过 CSS 控制.highlight的背景、圆角、过渡等 - 配合
document.execCommand('hiliteColor', false, '#ff9800')（已废弃但部分 Chromium 仍可用），或更现代的Range+DocumentFragment手动高亮文本节点 - 若做搜索高亮，优先用 JS 正则匹配后插入
<span class="search-highlight"></span>，避免依赖<mark></mark>的语义和样式耦合
真正容易被忽略的是：Electron 应用打包后，CSS 文件加载顺序、CSS-in-JS 的 hydration 时机、甚至 preload.js 中提前注入的样式，都可能覆盖 <mark></mark> 默认表现——不是它失效了，而是你没看见它被谁改了。
