Use CodeRay highlighter in the documentation

[marko-bekhta]

Hey @DavideD ,

I was looking into something for Search and noticed that opening reactive docs show some errors and tries to load CSS that is not there anymore ...
https://hibernate.org/reactive/documentation/2.2/reference/html_single/

run_prettify.min.js:1 Refused to load the stylesheet 'https://google-code-prettify.googlecode.com/svn/loader/prettify.css' because it violates the following Content Security Policy directive: "style-src 'unsafe-inline' 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://fonts.googleapis.com". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

From what I see https://docs.asciidoctor.org/asciidoc/latest/verbatim/source-highlighter/ prettify is not on the list of highlighters anymore (if it was).
I've tried highlight.js, but it also wants to load additional CSS, while CodeRay generates a CSS file as part of the output.

[DavideD]

Thanks!

[gavinking]

Not sure I understand, the code in the reactive docs appears to be correctly highlighted:

And with a color scheme that's significantly more attractive to my eyes than the one used in other Hibernate docs:

[marko-bekhta]

@gavinking when the docs are opened prettify/r298/run_prettify.min.js script tries to load CSS from https://google-code-prettify.googlecode.com/svn/loader/prettify.css and this is a dead link 🙈 + it is forbidden by the site config.
you can see that from the web console (right click -> inspect in the browser).

main CSS for this highlighter is loaded as it comes from the cdn (https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css) which is allowed. That's why the code is still highlighted.

with a color scheme that's significantly more attractive to my eyes

😃 hmm, if the theme in other projects isn't nice, then maybe we should look at switching to highlight.js and pick one of their themes. https://highlightjs.org/examples

[gavinking]

@gavinking when the docs are opened prettify/r298/run_prettify.min.js script tries to load CSS from https://google-code-prettify.googlecode.com/svn/loader/prettify.css and this is a dead link 🙈 + it is forbidden by the site config.

Yes but that's just because that file has been moved to GitHub, and anyway the error doesn't actually seem to break anything AFAICT.

hmm, if the theme in other projects isn't nice, then maybe we should look at switching to highlight.js and pick one of their themes. https://highlightjs.org/examples

Well, devil is in the details of which one. There's plenty of nice dark-themed color schemes available there, but not so many decent options for white bg.

[DavideD]

It doesn't look good to have CSP errors on the page, I think we should find a workaround or change the highlighter.
But I agree with @gavinking that the other highlighters don't look as good. Plus, prettify is archived now and it make sense to switch to something else.

Rouge seems the best one in recognizing the code. I don't think it would be too hard to add a custom CSS so that the result look more similar to prettify.
I've applied the highlighter in staging.
This website shows some preview of the different themes: https://spsarolkar.github.io/rouge-theme-preview/

Maybe I can change some of the colours to look more like the style from prettify.
I will have a look at it tomorrow.

[gavinking]

@DavideD that would be great. And if you can get it looking good, we can come back and apply that consistently across all our docs.

[DavideD]

I'm closing this PR and I will send a new one soon