HTML & CSS Syntax highlighting

Really nice being able to write html between the backticks, but would be even sweeter if the syntax was highlighted. It would make HTML and CSS notebooks as legible as Javascript current is.

Seems like VS Code and some other editors with plugins are able to pull it off, would be pretty slick here too.

3 Likes

Yep! It’s possible, and something I’ll queue up to look at when we’re doing another round of syntax-highlighting-and-editing-experience improvements. It’ll be sort of like JSX highlighting, because you can both enter HTML highlighting with the html tagged template literal, and then pop back to JavaScript highlighting with ${, and then back and forth indefinitely.

3 Likes

exactly. glad it’ll make it in the next pass, thanks for the reply :+1:

I’ve managed to get something similar to work for an SQL query using prism.js. It does not make use of the template literals as the html function does but is nice if you want to show your code. This could be expanded to work for any of the prism supported languages.

The prism library needed some tweaks to work on observable which is why it’s inline but it could probably be loaded from gist as well.

1 Like

You can load Prism without modifying its code. Here’s an example that highlights Wasm:

More generally, it would be great if there were some way to hook in and add custom syntax highlighting for arbitrary template literal names.

Syntax highlighting in template literals would make it much friendlier to use Observable for any type of compile-to-javascript or run-in-a-browser language. For example, coffeescript, clojurescript, wasm, webgl shaders, or … Python? Not to mention html, css, markdown, svg, …

Figuring out how to make highlighting flexible enough to achieve parity with javascript highlighting might be tricky. I’m not exactly sure what the ideal behavior is; maybe other folks have ideas.

Prettier bases its language detection on the tags of template literals, or — if there is no tag — comment tags like /* GraphQL */ `foo`. Another possibility would to look at a special property of the template tag name.

I would prefer if it looked up some member of the literal. E.g. for md`foo` it might look up md.language to find "markdown". Then if I make my own template md2 the highlighting isn’t thrown off, because md2.language is still "markdown".

The tricky part is figuring out how to make this user-extensible, so that if some novel or even notebook-specific language wants to add syntax highlighting it doesn’t need to be registered with some centralized third-party database of syntax definitions.

2 Likes

At a major university data science class, we’ve tried using Observable for livecoding in lectures and I wanted to second this request. At the moment Observable is amazing for live-coding data vis, but the lack of highlighting for HTML can make it difficult for students to follow the HTML and CSS bits.

I would like syntax highlighting for HTML and CSS too :smile:

1 Like
html`
<div class="foo">Observable Talk has this feature though!</div>
<style>
.foo {
color: purple;
}
</style>
`