I’ve found that highlight.js has syntax highlighting for displayed code snippets but I could not find documentation for how to use it in conjunction with elm.
What do I do in order highlight displayed code like an IDE does with elm via 3rd party code or built in?
Note that this will embed markedjs which is included in elm-explorations/markdown, so there is a significant impact on assets size if you don’t already embed it. elm-explorations/markdown is also experimental and might not be available in future Elm versions.
I have edited my example. This does not use the theme background color though, likely because elm-explorations/markdown calls the highlighter on the content only.
I’ve used highlightJS with Elm in the past and it works fines as long as you don’t have to alter the node tree where the highlightJS elements are after you rendered it the first time. IIRC JS libraries like highlightJS (which alter the DOM by themselves) don’t play well with Elm’s Virtual DOM. Due to this, in my experiment, I could properly highlight code blocks, but after tried to alter the node tree (e.g., collapse a part of the code) everything got messed up