​x
 
<html>
<head>
<style>
#colorText {
  font-family: monospace;
  font-size: 25px;
}
​
::highlight(mycolor-1) {
  color: red;
}
::highlight(mycolor-2) {
  color: green;
}
::highlight(mycolor-3) {
  color: blue;
}
::highlight(mycolor-4) {
  color: salmon;
}
</style>
</head>
<body>
​
<h1>::highlight 演示</h1>
​
<p id="colorText">CSS 自定义高亮</p>
​
<script>
const textNode = document.getElementById("colorText").firstChild;
​
if (!CSS.highlights) {
  textNode.textContent =
    "高亮 API 不支持！";
}
​
// 为每种颜色创建并注册高亮
const highlights = [];
for (let i = 0; i < 4; i++) {
  // 为此颜色创建一个新的高亮。
  const colorHighlight = new Highlight();
  highlights.push(colorHighlight);
​
  // 将此高亮注册为自定义名称。
  CSS.highlights.set(`mycolor-${i + 1}`, colorHighlight);
}
​
// 逐个字符遍历文本。
for (let i = 0; i < textNode.textContent.length; i++) {
  // 为此字符创建一个新的范围。
  const range = new Range();
  range.setStart(textNode, i);
  range.setEnd(textNode, i + 1);
​
  // 将范围添加到下一个可用的高亮，
  // 当到达第四个时循环回第一个。
  highlights[i % 4].add(range);
}
</script>
</body>
</html>
​