search

dtwrks / elm-book

Rich documentation builder for Elm applications and packages. Inspired by Storybook and HexDocs.
http://elm-book-in-elm-book.netlify.app
Mozilla Public License 2.0
96 stars 8 forks source link

Syntax highlighting #41

Open jamesrweb opened 1 year ago

jamesrweb commented 1 year ago

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.

georgesboris commented 1 year ago

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.

jamesrweb commented 4 months ago

Hi @georgesboris did you have change to think on this topic any further in the interceding time? It would still be nice to have.