Moving to client-side syntax highlighting

| permalink | kirby, meta

Well, I tried.

I tried to keep the site JavaScript free by relying on server side syntax highlighting via Kirby Highlighter plugin.

However, I ran into a bug with the plugin that mangles Unicode characters ➜ and▕ which became the straw that broke the camel's back.

It's not just the bug itself, but it's with the fact that this plugin relies on the outdated PHP port of highlight.js which (the PHP port) does not support up-to-date CSS syntax and features such as @property, nesting, and nested var() in fallbacks.

/* highlight.js highlights the following correctly */

.parent {
  --_margin-top: 1rem;
  &.alt {
    padding: 1.5rem;
  .child {
    background: var(--bg-default, var(--bg, blue));

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;

The fact that I write about CSS rather extensively means this limitation is becoming increasingly untenable, and not having syntax highlighting degrades readability enough that I cannot make the downgrade.

So, while I do love having a website free from JavaScript, ideological purity runs smack into unfortunate reality and I had to relent and move to a js-based solution.

I ended up picking between highlight.js and prism.js and ended up choosing the latter as highlight.js wrongly highlights custom property containing underscore and hyphen such as --_margin-top.

What I do like with js-based libraries, is how easy it is to integrate and switch between them. It took me 15 minutes to switch to prism.js from highlight.js which I quite liked.

Why not pick another server-side solution?

Well, because all existing PHP solutions suck.

All the mainstream websites such as stackoverflow use client side js-based highlighting, and so only js solutions are being actively developed and maintained.

So unless I want to move my whole stack to Node.js, I will have to move syntax highlighting client side.

Oh well, a little JavaScript won't kill anyone... I hope.