[WIP] start implementing proper syntax highlighting

[Rich-Harris]

Handlebars highlighting is no longer adequate, post-v2, so we need to implement our own syntax highlighting. No idea if I'm doing it right — it's a little finicky, to be honest — but early results are encouraging.

[Rich-Harris]

well, I've just about given up on this. Getting indentation to work sensibly is beyond me. If anyone has any idea how to make it work then I'm all ears, otherwise I might even consider trying to get Monaco to work

[vedam]

@Rich-Harris I'm not sure if this is the right place, but I've already given some thought to the topic of repl and syntax-highlighting. Why do we want to load the whole repl- liveedit- snippets-storage-and-administration-story onto our (at the end most likely @Rich-Harris) shoulders, if there are already existing and usable solutions for it? Why reinvent the wheel?

I'm thinking of i.e. codesandbox or stackblitz. Both have meanwhile svelte-templates. Outsourcing the repl, code snippets and examples would clear the head for other important things. One big worry less. Unless, of course, there are concerns that I'm not aware of? And on the website or in the guide we have directly editable, highlighted, prettiered snippets via embedds.

Another thought, probably offtopic, was to create something similar to .mdx with svelte. Since in my opinion almost all developers work with markdown, documenting and creating pages anyway, I would find it natural to have an interface that seamlessly connects svelte-components with md.

It's also impressive how quickly this combination (Components + Markdown) has evolved into an ecosystem of useful and usable tools:

• ok-mdx – Browser-based MDX editor
• docz – Documentation framework
• mdx-deck – MDX-based presentation decks

Maybe once done, this will solve Syntax-highlighting-issues too.

Unfortunately I'm coming from the design corner and my technical understanding isn't enough to do it on my own (parsing AST, MD_AST and all those things I've never heard of???), but I just wanted to get those thoughts out of my head into the room.

Man, my comments are so sweeping ;D

[Rich-Harris]

It's a fair question and one that I've asked myself. But there are a few key advantages to maintaining our own REPL, that essentially boil down to us having more control:

• we can trigger recompilation (in a worker) on every single keypress, making our REPL feel much more responsive than most
• we can easily specify different versions of Svelte, which is useful for reproductions and ensuring that someone's gist isn't affected by breaking changes (TODO — warn the user if the version isn't latest)
• we can create our own compiler options dialog (TODO)
• we can show the compiled output
• we can have a two-way data editor, which no other REPL provides

Using someone else's REPL wouldn't solve the syntax highlighting issue until someone creates a TextMate grammar for .htmlx files.

A Svelte equivalent of .mdx would be cool. We should incorporate that into our eventual plans for a component marketplace.

[Ryuno-Ki]

@Rich-Harris What about breaking out those todos into separate issues?