Syntax Highlighting for HTML in JavaScript template like Hono

[tfayyaz]

To use the Observable Plot library client side I have to use the Hono HTML helper to insert snippets into JSX.

This means that the Oberservable Plot code has no syntax highlighting making it harder to develop with.

Example here - https://www.val.town/v/tfayyaz/frequencyDotPlot

The Hono page mentions these as examples to enable syntax highlighting in other tools:

Thanks to these libraries, Visual Studio Code and vim also interprets template literals as HTML, allowing syntax highlighting and formatting to be applied.

• https://marketplace.visualstudio.com/items?itemName=bierner.lit-html
• https://github.com/MaxMEllon/vim-jsx-pretty

[stevekrouse]

Great feature request!

One alternative way to implement what you built is to put your client-side script in another val and import it from your http val. The downside that you can't do everything in one val, but the upside is that you get full syntax highlighting and our esm.town will transpile everything (ie typescript and jsx) nicely for you.

Script: https://www.val.town/v/stevekrouse/frequencyDataPlotScript
HTML val: https://www.val.town/v/stevekrouse/frequencyDotPlot