<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!";
}
const highlights = [];
for (let i = 0; i < 4; i++) {
const colorHighlight = new Highlight();
highlights.push(colorHighlight);
CSS.highlights.set(`mycolor-${i + 1}`, colorHighlight);
}