Get your own website Result Size: 625 x 565
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>Demo of ::highlight</h1>
<p id="colorText">CSS Custom Highlight</p>
<script>
const textNode = document.getElementById("colorText").firstChild;
if (!CSS.highlights) {
  textNode.textContent =
    "Highlight API is not supported!";
}
// Create and register highlights for each color
const highlights = [];
for (let i = 0; i < 4; i++) {
  // Create a new highlight for this color.
  const colorHighlight = new Highlight();
  highlights.push(colorHighlight);
  // Register this highlight under a custom name.
  CSS.highlights.set(`mycolor-${i + 1}`, colorHighlight);
}