feature request: highlight characters in #input text box

[NovemLinguae]

Useful for spotting unescaped characters, spotting unclosed parentheses, etc. In lua's case, it might help the user identify differences between regular regex and lua regex.

Screenshot from a website that does this (https://regex101.com):

Later, could add a hover tooltip giving more info for each color.

[GitSparTV]

Hi, I want this too but I don't know JS enough to implement this is adequate way

[NovemLinguae]

One way to do it would be to use the HTML property contenteditable="true" and a bunch of <span> tags. Then use JavaScript to detect changes to a <textarea contenteditable="true"> and update the span tags as they type.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

I did this once for a project and I found it to be difficult. contenteditable has a lot of quirks.

You could mostly avoid JavaScript and also avoid contenteditable if you created a second text box below the first one, that was read only. The server could then generate <textarea disabled><span class="foo">ABC</span><span class="bar">DEF</span></textarea>. Then color the classes in CSS. JavaScript would only be needed for mouse hover tooltips.

[GitSparTV]

I will see what I can do

[xguhx]

Hello @GitSparTV, can I try to help you implementing this feature?

[GitSparTV]

@GMOTGIT Contributions are welcome.

[GitSparTV]

I got some resource help from discord for developers

[xguhx]

@GitSparTV Thank you, I will take a look at Slate.