Time to dig deep, and get the Chatbots involved.

-=-=-

For YEARS I've been wanting to add Syntax Highlighting to JSE, but the main issue is that anything you can "see", you can also "copy"..
So, if there's a div with syntax highlighted code, and you copy it and try to paste it elsewhere, the code ends up having html colour tags intermingled throughout.
Either that or you're at the mercy of Javascript being slow and sluggish, and that ends up dragging down the overall speed of your ability to type.
Or it jumps back and forth between the text you're writing, and the colourless code, and the syntax highlighted code, and back.



True, there's a myriad of suitable libraries out there, but .. Have you seen how much of your battery they drain when you're using them?

I've been letting this fester for a while, then, and got as far as..
"If you place the display div behind the text area for input, you could mock a syntax highlighted duplicate in the background."
The issue then being "How do you jump through to the line you need?"

Neither the Div or text area has numerical rows, so you only have "newline" that you can safely parse, and then you're at the mercy of having to run through the text each frame, or end up storing things in oversized arrays and hoping for the best.

I always end up over-complicating it in my head, so this time I opted to ask a chatbot.

"How do I make a decent syntax highlighter in Javascript" I would ask it.
.. And I've done this a lot of times, by the way.
And each time it'll suggest multi-megabyte libraries, or bizarre solutions that end up slowing to a crawl, and eventually getting stuck in much the same places that I am.

Hmm..



Yesterday, then, I went in a slightly different path.
My head got stuck at the part where I have to syntax highlight chunks whilst keeping everything fast, so I thought that I see if I can get the A.I. up to that point, too.
Rather than ask it "Do all this, go!!!!" I instead guided the A.I. through what I'd already done, to get it up to speed.

First, we have two mirrored divs. The left is our text area, the right should be a direct mirror.
Next add scrolling mirroring so we can scroll (or text-move) to a point on the left and it mirrors on the right.
Use the same font, so it's a 100% mirror, and then instead of having them be side by side, move the text area directly on top of the other div.
Next we'll make the text area transparent, so we can type into it, but will only see the contents of the div.



It was at this point that ChatGPT made a crazy and bold suggestion..



Gosh! I never would've even considered such a thing. Oh, ChatGPT with your ever so obscure predictions!!

We took a few more steps, and everything seemed to work well enough, but a little bit erratic, and still doing that weird flickering thing that I've seen before, where you start typing and the screen constantly flickers between no-highlighting, then highlighting, then none, and back and over and over.
It's really annoying when it does that.



But my time with ChatGPT was up for today.
Dang..

I copy and pasted the latest version into Google Gemini and asked if it could solve the issue. I suggested making it into more of a double-buffered style, so you have the realtime buffer and the displayed buffer. Gemini was quite impressed (Gosh, all the AIs are mightily impressed, lately) and set about adding a double-buffer to the display.

A few more nips and tucks, and a "hey, make me half-a-dozen themes, would you?" and we're up to the point that it is, now.



I haven't yet made this a part of JSE. It should be really easy to do so, but first I need testers to do what they do best.
If you'd like to have a play with it, there's a rather empty page here.

Please do so, and do as much as you can with the editor.
Use it like you'd normally use an editor, and get back to me to let me know how broken and erratic it is.

Any and all thoughts in the Comments or the Discord, please.

Ta muchly.

Lesson Learned

If you want the Chatbots to do things "your" way, then you have to guide them from the beginning of your process.
Teach them what it is you're doing, and why you're doing the things in the way you are, and they'll be less prone to going "Oh, hey, just use this 190Mb library."

Obligatory AI Usage Disclaimer

"You could've done this yourself. You're so lazy."
I HAVE tried to do this, on numerous occasions.
We're almost 5 years into the life of JSE, and it hasn't been something that I've just gone "Bah, who needs Syntax Highlighting, anyway!?"
In fact, it's been the exact opposite.

I know it's annoying that it's not had it, and I know it's terrible that I could've just used a 190Mb Syntax Highlighting library.
But in my heart I knew that I understood the fundamentals of what it was that I wanted to do, and how I *should* have been able to do it.
I just kept hitting the same roadblock, over and over.

The A.I. used here was for the sake of getting me over that stumbling block, and it helped immensely.
I do not consider this to be an "Evil AI" situation.

Do you?
Leave a thought in the comments or the underused Discord.

A.I. Corner

Lyrics : By me
Sound Imported : Ugly Bell
> Reveal 🔎
| Suno Link

Alternative version
| Suno Link

Sung by Suno



"Cartoon Derek paints a beautiful surreal oil painting titled "When will all the sunshine go away?" " by DrawThings / Flux

But also



I've missed you, Derek Flux!

> Reveal 🔎