Traditional syntax highlighting methods create numerous `<span>` elements, one for each token in the code, leading to heavy DOM manipulation. This approach can generate hundreds or thousands of nodes, causing performance issues with rendering, layout calculations, and memory consumption. The CSS Custom Highlight API addresses these problems by allowing developers to style text without altering the DOM structure. It uses lightweight `Range` objects to mark character positions in a single text node, minimizing overhead and making rendering faster. The API is supported by all major modern browsers, including Chrome 105+, Firefox 140+, Safari 17.2+, and Opera 91+. While implementing the API, developers define styles for different token types (like keywords, strings, or comments) using the `::highlight()` pseudo-element. The highlighting logic involves tokenizing the code, creating ranges for each token, and grouping these ranges by type before registering them with the browser's highlight registry. This method keeps the HTML clean and allows for efficient styling purely through CSS. In practical terms, the API offers significant advantages over traditional methods. It improves performance by avoiding DOM mutations, reduces memory usage, and maintains a simple HTML structure. However, it does have limitations, such as only working with plain text content and requiring a single text node. Older browsers that don't support the API will need a fallback to the traditional span-based approach. Overall, the CSS Custom Highlight API presents a modern solution for syntax highlighting, balancing efficiency and simplicity in web applications.