Updating Code Syntax Highlighting to use Prism Js

[kevball2]

Hi all,

I have been investigating the possibility of using Prism.js instead of highlights.js to handle code syntax. I see there was a conversation a couple years back but wanted to bring up the topic again.

I started a branch with prism implemented in place of highlight (https://github.com/kevball2/hugo-clarity-prism/tree/feature-prism-syntax-highlighting) but I ran into issues with trying to incorporate the CSS options provides with prism. I went down the rabbit hole trying to understand how the different code block options were added and tried to modify them to work the new classes that prism generated but didn't make it far. If anyone has any input if am on the right track or now please let me know!

[onweru]

@kevball2, we tried too. I can try revisiting the issue over the December holidays, when I'm likely to have some free time.

[kevball2]

Thanks @onweru, am I on the right track though? I have some free time and don't mind investing some if I know the direction to go. There were also optional copy and line display css options for prism you could add. I didn't know there would be interest in porting over that functionality to what prism provided.

[onweru]

From a quick Look at your branch, you seem to be on track. Won't know for sure until I actually test your branch. When I do, I can offer comprehensive suggestions.

[onweru]

I'm thrilled that you're willing to work on this though.

[chipzoller]

+1 !

[kevball2]

Glad to at least give it a try! Hopefully I can do enough leg work to help implement this feature and learn a bit more about CSS and SASS.

A little more digging today,
Trying to get the line number toggle resolved

the class changes to "token number" for the span with prism. I tried updating the sass file with the following but unfortunately that did not work

&_nolines.line .ln .token.number
    display: none

From quick google search it looks like css treats spaces in class names as seperate classes, so using token.number should match but I think that is why it isn't working.