Syntax highlighting recommendations for Native WC

[MichaelTrilford-Airwallex]

For Shadow.Root docs, can we add some helpful guidelines on MDN of how we can enable syntax highlighting for native web components?

This is one area that I struggle to find any information on, and I would love to learn more about achieving that.

https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/innerHTML

shadow.innerHTML = '<strong>This element should be more important!</strong>';

[Rumyra]

Just to clarify @MichaelTrilford-Airwallex you would like guidelines for highlighting code displayed inside components?

[MichaelTrilford-Airwallex]

Hello Ruth,

Here's an example:

See how the colour is orange and there is no formatting? I'm struggling to find resources to enable correct syntax highlighting.

Whenever I'm stuck, I find myself on your website. Whether it is the right place or not. Maybe the MDN Web docs could be a good place to expose other resources.

[Ryuno-Ki]

I've seen Styled Components sporting syntax highlighting for VS Code. Perhaps you can study its implementation and check, whether it can be applied to this case as well?

Might be, that you need to turn the template literal into a tagged template, so it's easier for an IDE to separate this use from a regular template literal.

[MichaelTrilford-Airwallex]

Thanks mate. I have seen Web Components that put html in front, and that works.

E.g.
html’…’ – I had to use regular ticks for this example

But usually you need to spin up a certain framework.

I guess some resources around best practices / boilerplate examples of structuring a native web component would be very beneficial for people wanting to ‘buy-in’ to Web Components.