Last year, I talked about reducing the size of this blog.
This time has come again, by removing client side syntax highlighting.
1. Client Side Highlighting
However, this brings a few disadvantages:
download prism-code.min.js (7 KiB);
download prism-autoloader.min.js (5 KiB);
download prism-solarized.css (2.5 KiB);
Also, it does not make any sense to ask every client to re-calculate the colours each time, for it is the same page for everyone.
This is just a waste of network bandwidth, and of compute cycles, and by consequence of energy.
2. Server Side Highlighting
Asciidoctor can pre-process code blocks, and then it’s only a matter of CSS styling.
I’ve decided to use rouge for that:
[markup.asciidocExt.attributes] source-highlighter = 'rouge' rouge-css = 'class'
Finally, the theme to load is just a CSS file to add.
Now, the html of each page is slightly bigger, and a new CSS file needs to be downloaded (1.5 KiB in this case).
To have an idea of the size difference, I’m looking at a previous post of mine about jq, because it uses many code blocks: