Better syntax highlighting for html-like template literals

Glitch Feature Ideas
1

Could we get better syntax highlighting for html inside tagged template literals?

See, no code for html elements.

screen shot 2017-02-01 at 23 39 56
c8a95256-e8d7-11e6-8b51-2ed01f35ba27.png1314×976 97.4 KB

1 Like
2

For reference, compare to GitHub.

screen shot 2017-02-01 at 23 43 01
34e8f7c8-e8d8-11e6-82d3-5fdcbbf33b2a.png722×100 9.85 KB

1 Like
3

Hi Jorge,

Thanks for the suggestion :sunglasses:

We’re using the stock syntax highlighting from Code Mirror, so their GitHub repo might be a better place for that request. If the syntax highlighting on their demo page does a better job than Gomix, let us know and we’ll double-check that we’ve got the most up-to-date version :sparkles:

1 Like
4

I had a similar request, both for syntax highlighting, but also for general editor functionality with template literals. Maybe it’s not possible because a string could be literally anything but there are a lot of libraries, yo-yo for instance, that use the literal to pass HTML around. When you are doing this it breaks indentation and other common HTML features that are present normally. That’s a tough one maybe but it would be an awesome feature for anyone using modern lightweight JS libs like Choo or Yo-Yo

5

Hi Paul,

At least for jsx, there is this workaround I wrote about in a different post: Syntax highlighting for jsx in .js files?, which basically sets the syntax highlight to jsx for javascript files.

Let us know if you find it useful :slight_smile:

2 Likes
6

Hi etamponi, your solution doesn’t work well for situations where Glitch is being used as a demo that other people are going to look at.

It would be great if the creator of a Glitch could set the desired syntax highlighting for an individual files (if the defaults aren’t correct), and then everyone who looked at those file would see the set highlighting.

For example, if I have a .njk file using nunjucks templates, I’d much rather have it use HTML syntax highlighting that just having no highlighting at all (what I currently see). The same thing is true for .mjs, where I should be able to tell Glitch that I just want regular JavaScript syntax highlighting.

7

Hello, CodeMirror said that they will not implement it into their default modes, but google-modes are CodeMirror modes that follow Google’s style guidelines. Recently there was a PR that implements tagged-template literals that was reviewed by the creator of CodeMirror himself.

Would y’all be willing to implement these modes as the default or at least as a syntax highlighting option in your CodeMirror implementation?