\
**Category:** Feedback\
**Created:** [March 24, 2018, 10:59pm UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543 "2018-03-24T22:59:08Z")\
**Posts on this page:** 11\
**Page:** 1
**Author:**  [@argyleink](https://talk.observablehq.com/u/argyleink)\
**Post date:** [March 24, 2018, 10:59pm UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543/1 "2018-03-24T22:59:08Z")
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.
---
**Author:**  [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [March 26, 2018, 5:38pm UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543/2 "2018-03-26T17:38:43Z")
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.
---
**Author:**  [@argyleink](https://talk.observablehq.com/u/argyleink)\
**Post date:** [March 26, 2018, 8:01pm UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543/3 "2018-03-26T20:01:41Z")
exactly. glad it’ll make it in the next pass, thanks for the reply 👍
---
**Author:**  [@lucas](https://talk.observablehq.com/u/lucas)\
**Post date:** [May 12, 2018, 11:03am UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543/4 "2018-05-12T11:03:43Z")
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.
> **[Advanced syntax highlighting](https://observablehq.com/@lsei/advanced-syntax-highlighting)**
>
> An Observable notebook by Lucas.
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.
---
**Author:**  [@shaunlebron](https://talk.observablehq.com/u/shaunlebron)\
**Post date:** [May 14, 2018, 3:03am UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543/5 "2018-05-14T03:03:41Z")
You can load Prism without modifying its code. Here’s an example that highlights Wasm:
> **[Wasm](https://observablehq.com/@shaunlebron/wasm)**
>
> An Observable notebook by Shaun Lebron.
---
**Author:**  [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [May 16, 2019, 1:49am UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543/6 "2019-05-16T01:49:15Z")
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](https://hacks.mozilla.org/2019/04/pyodide-bringing-the-scientific-python-stack-to-the-browser/)? 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.
---
**Author:**  [@j-f1](https://talk.observablehq.com/u/j-f1)\
**Post date:** [May 16, 2019, 4:57pm UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543/7 "2019-05-16T16:57:46Z")
[Prettier](https://prettier.io) 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.
---
**Author:**  [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [May 17, 2019, 1:58am UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543/8 "2019-05-17T01:58:53Z")
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.
---
**Author:**  [@ianarawjo](https://talk.observablehq.com/u/ianarawjo)\
**Post date:** [February 4, 2020, 3:31pm UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543/9 "2020-02-04T15:31:22Z")
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.
---
**Author:**  [@fnick851](https://talk.observablehq.com/u/fnick851)\
**Post date:** [March 10, 2020, 1:59am UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543/10 "2020-03-10T01:59:27Z")
I would like syntax highlighting for HTML and CSS too 😄
---
**Author:**  [@a10k](https://talk.observablehq.com/u/a10k)\
**Post date:** [April 29, 2021, 6:36pm UTC](https://talk.observablehq.com/t/html-css-syntax-highlighting/543/11 "2021-04-29T18:36:09Z")
```auto
html`
Observable Talk has this feature though!
`
```