Add syntax highlighting in playground

[bruhng]

Is your feature request related to a problem? Please describe.
It is sometimes hard to read what is written on the website.

Describe the solution you'd like
I think we should add syntax highlighting for ModMark, Latex and HTML

Describe alternatives you've considered
I think we should use the Prism package, it supports latex and HTML and is easily extended using regex so we can add ModMark support easily.
https://prismjs.com/index.html

[CMDJojo]

We do have syntax highlighting in HTML

[bruhng]

Ohh, i did not know, i have been working only on latex lately, but it would still be nice with latex and ModMark Hightlighting

[adelhult]

This is a nice suggestion! It would be really neat to have proper syntax highlighting. It looks like Prism is only intended for static examples and not for code editors though. But, as a side note it might be a good idea to add prism as a optional back-end for the code module if syntect (that we currently use) proves to have a too slow start-up time.

There are many different ways of syntax highlighting code and which we end up using will end up impacting our plans for editor integration and how the playground will work. I think these are our main options:

• (Web) Ace - the playground is currently using the Ace editor, however, it might not be our best option for the future. I mainly choose it since it is very easy to embed without much fuss. After a quick glance it looks like they use the textmate grammar format to define language (which is nice because it is the same as VS Code uses).
• (Web) CodeMirror - a more modern text editor that we perhaps would consider using (this is what Overleaf and many others use). CodeMirror has its own way of defining language with the Lezer parsing system.
• (Web) Monaco editor - this is the same editor as VS Code uses but stand-alone on the web. When using Monaco stand alone like this languages are defined using Monarch (note that this is a different format from what VS Code uses for their language extensions).
• (Not web) VS Code extension with a textmate grammar.
• (Not web) Tree sitter - A super cool parsing system. However, it might be a bit out of scope and harder to implement then the others. (I think this is used in neovim, helix, zed and a few other more "modern" text editors.