Styling code fragments

[PeterParslow]

Is there any way to make the code fragments in the HTML output look more like they do in the ASCIIDOC view on GitHub?

E.g. Figure 1 (etc) in 1048:

• ASCIIDOC: https://github.com/agiorguk/gemini/blob/dev/docs/1048-uk-gemini-encoding-guidance.asciidoc
• HTML: https://agiorguk.github.io/gemini-dev/1048-uk-gemini-encoding-guidance.html

The ASCIIDOC presentations has a scroll bar on the "box" (grey) when the code line is wider than the window, and also has less space between the lines

The HTML output uses

<pre class="highlight"><code class="language-xml" data-lang="xml">

I don't know where the "highlight" or "language-xml" CSS class are styled/controlled.

[archaeogeek]

It looks like we should be able to do something with the code boxes- using https://docs.asciidoctor.org/asciidoc/latest/verbatim/source-blocks/ and with syntax highlighting (see https://docs.asciidoctor.org/asciidoctor/latest/syntax-highlighting/). I think that the code class and data-lang attributes are possibly automatically inserted (something to do with highlightjs?). Happy to have a play with this!

[archaeogeek]

This turns out to be more of a faff than I anticipated- but I've made some progress-see abstract screenshot below (I haven't managed to get it properly deployed yet).

This is using pygments- with some limitations in that we seem quite limited to what styles we can use. Now I know what the problem was, I will hopefully be able to test out some of the other syntax highlighters.