search

tinygo-org / tinygo-site

Web site for TinyGo project.
https://tinygo.org
54 stars 110 forks source link

Syntax highlighting on the playground #412

Closed aykevl closed 2 months ago

aykevl commented 3 months ago

This adds syntax highlighting to the playground on the homepage and in the tour.

I picked highlighting themes that match the code samples on the website as much as possible, although it's not a perfect match. CodeMirror includes a oneDark theme (same as on the website) for dark mode so that's great, but for light mode I actually created a new CodeMirror theme for the tango theme that is used by default by Docsy.

I have tried to keep the appearance and accessibility properties of the textarea the same as much as possible. I think the outcome is pretty neat: it looks just like any other Bootstrap input but with numbered lines and syntax highlighting.

~Eventually I'd like to add a feature to show compiler error messages where they happen. Or at least to highlight the lines with errors. But that's for another time.~ implemented

One major reason for choosing CodeMirror 6 is that it works well on mobile, while most of these web code editors don't.

I've also fixed an issue I introduced in #411: the tab size is now back to 4 spaces instead of 8.

aykevl commented 2 months ago

Updated. It now also shows errors where they happen, almost like an IDE. I have plans to make these errors more accurate, to bring truly IDE-like error reporting to the editor.

deadprogram commented 2 months ago

Works exactly as expected! Thank you very much for working on this @aykevl now merging.