Historically, syntax highlighting in a web browser has been a computationally abusive process. To colorize the word function blue and the word myVar yellow, standard editors wrap every single word in a <span> tag with a specific CSS class. A 5,000-line file can easily generate 50,000 DOM nodes, absolutely devastating the browser's memory and layout engine.
NitroIDE completely eliminates the <span> tag. By utilizing the bleeding-edge CSS Custom Highlight API, we pass mathematical text ranges directly to the browser's native C++ rendering engine, styling the text without adding a single node to the DOM.
Instead of modifying the HTML, our WebAssembly AST parser calculates the start and end indices of every syntax token. We create standard JavaScript Range objects, group them by their syntax type (e.g., all "keywords"), and register them in the global CSS.highlights map.
Applying the Styles: Once the ranges are registered in JavaScript, applying the actual colors is done entirely in pure CSS using the new ::highlight() pseudo-element. Example: ::highlight(syntax-keyword) { color: #3b82f6; }.
Because the Custom Highlight API operates strictly during the browser's final paint phase, changing the syntax colors or updating a range as the user types never triggers a DOM layout recalculation. You get the exact visual fidelity of a native desktop editor with zero memory bloat.
Paste 10,000 lines of code into our editor. Notice how the DOM stays completely empty.
Launch Workspace