Highlight syntax on build, not in browser
toastal opened this issue · comments
Currently the syntax highlighting is done via a client-side highlighter downloaded from a CDN. There are problems with this approach:
<noscript>is not supported; text is black on black so it's not remotely readable with JavaScript disabled out of limitations or security/privacy--and if the goal is to deliver content accessibly to the most folks, then lowering requirements should be favored- Requires trust and giving up data to a third-party CDN; should users need trust this third party when this could be vendored to first-party? (this also applies to Bootstrap, but at a minimum, at least this script includes a subresource integrity check to verify that the file is correct from a third party)
- Provided the CDN is trustworthy and delivering the same file, all users are downloading and executing the exact same highlighter code on the same code blocks which create wasteful processing on the device and also requires extra bandwidth to download and execute this
Moving syntax highlighting to the build phase would:
- transformation from blank
<pre>block to highlighted is only executed once (memoized at build) emitting code with the appropriate CSS classes on the HTML - Users do not need to trust or execute any third-party code
- Users on browsers with JavaScript missing or disabled, can still have a rich experience
- No additional data or CPU resources are used on client devices which is better for energy consumption and site responsiveness (no need to parse and then repaint)
Would you be up for a PR :)?
Maybe? I've used OCaml to do syntax highlighting using a custom Lambda Soup script, but I'm not sure what's the best way to handle in this sort of environment. If there was a flake.nix I could add a dependency, but I don't know what's the best here.
I'll try to find some time to nixify this