[v2] Better support for Custom Code Highlight

[luizdepra]

Another tricky one.
We need to find a way to support others code highlight settings (other b2/bw).
Maybe v0.43 Hugo Piper can help us here.

About the style, maybe we should:

• Play with borders
• Show language name
• Add copy to clipboard button

[khos2ow]

I volunteer for this one, you can assign it to me.

[luizdepra]

I think this one is already solved. Needs testing.

[luizdepra]

@khos2ow, did you find any issues after the SCSS refactor? Can we close this one?

[khos2ow]

I have an override of this on my own site, and try to send a PR sometime soon. The thing is this essentially will become a personal opinion of which one to choose and I don't think it makes sense to make this configurable (may be only a wiki on how to override it).

[luizdepra]

Ok. Need to test ti again. But I think this problem is already solved.

[luizdepra]

I think we s till need a styling refactor.
I want something like code boxes from this site. Maybe we should test with a border, but I really want to show the language name.

[clement-pannetier]

Hi @luizdepra, I've been testing some implementations. I still have issues with colors with dark mode and styles used, but here is an example:

To do this I overrided the default highlight shortcode and added an element to show the language.
Hugo now uses Chroma so I removed the default Pygments configs but added this one pygmentsUseClasses=true because I need to generate the stylesheet for the styles in order to use these classes to style the language element. The only problem, we need to load the stylesheet file with the customCss config property to work by default.

One more problem, overriding the highlight shortcode don't work when using code fences :/