elm-book icon indicating copy to clipboard operation
elm-book copied to clipboard

Syntax highlighting

Open jamesrweb opened this issue 2 years ago • 2 comments

Currently when rendering code blocks there is no out-of-the-box syntax highlighting but also no easy way to add a custom implementation since the <code /> element doesn't get information from the markdown language name tag. In the images attached as an example, the markdown code block has the javascript tag but the generated <code /> element only gets a class name of elmsh and the generated code is simply unstyled white on black.

Markdown: Bildschirmfoto 2022-11-07 um 02 59 13

Generated HTML: Bildschirmfoto 2022-11-07 um 02 59 32

Unstyled content: Bildschirmfoto 2022-11-07 um 03 01 00

It would be nice to get either out-of-the-box syntax highlighting OR some form of data-* attribute to implement some custom logic if otherwise preferred.

jamesrweb avatar Nov 07 '22 02:11 jamesrweb

the data approach seems doable! the other strategy is a bit more problematic since elm-book is hosted on elm-packages so there is no way for us to include custom js scripts that would handle all of the possible syntaxes. Thanks for opening this PR, I'll try to get this merged on an upcoming release.

georgesboris avatar Jan 09 '23 21:01 georgesboris