Following the disscussion in #190, I am opening this issue to discuss requirements and implementation.

Current status

Demo: https://codepen.io/eyaler/pen/NPGOaJb

Features:

• supports tabs
• supports wrapping (container width only)
• demo integration with highlight.js (without reparsing)
• works on Firefox/Chromium/Safari on Windows/Android/macOS/iOS
• initial performance tests show negligible overhead on top of highlight.js
• no issues found with positions and transforms in Chromium

Current limitations:

• strictly single font monospace (but we could try to solve this later at risk of performance and robustness)
• no bold/italics/underline nor background highlighting (perhaps the latter can be dealt with using background-blend?)
• wrapping strictly at container width (cannot rely on browser wrapping, but we could use our own logic or library to wrap semantically)

Open questions:

• background-clip: text vs. mix-blend + additional div (i have a strong preference for the former)
• for the clip option - background color is controlled by the element behind. do we leave that to the user or do something?
• need more fuzzing tests to make sure it is robust and performant
• need to design a more generic connector to the parsing engine, and add a prism.js option, maybe also tree-sitter?
• is the wrapping behavior acceptible? should we factor it out or does this simple approach make sense only here? how is this option controlled?
• how to integrate with code-input, so that the html uses a regular textarea with a class?
• allowing for typed chars to appear instantly before highlighting finishes
• background-image: url(svg) as an alternative to gradients, opens many possibilities