Replace Prism with highlight.js

[mtsknn]

Also changed code block styles from dark to light. A dark theme would better suit a site-wide dark theme which I'm planning to implement some day.

Pros:

• Indentation of code blocks works now properly. The 11ty plugin sometimes messes up indentation; see the screenshot at the end.
• Moved some styles from the ugly main.css to the new CodeBlock.js.
• Line highlights are now specified with a syntax that's more compatible with Prettier.
  • Before: ```js/2,4-7,10
    • 0-based
    • Prettier doesn't recognize the lang js/2,4-7,10, so it doesn't format the code block
  • After: ```js 3,5-8,11
    • 1-based (IMO clearer)
    • Prettier recognizes the lang js just fine
• 1 dependency less (the 11ty plugin). I had forked it before (see commit 423d059) but never updated it to match upstream, and now I don't have to!
• Now that I'm handling line highlights myself (instead of the 11ty plugin doing it), I have means to implement other things as well:
  • More granular highlighting
    • Inspiration 😍
  • Copy button
  • Metadata, e.g. show the language ("JavaScript") and a file name ("foo.js")
• The build logs mention if I have code blocks with unsupported languages, or if highlighting some code fails for some reason.

Cons:

• Pug is not supported by highlight.js, though I have only one such code block anyway.
• More own code to maintain, but that's okay because my own code is good code. 😜

Preact might seem like an overkill, but I'm planning to later replace Pug layouts with Preact layouts, so installing Preact and related libraries was inevitable. :thanos:

Btw I noticed that code block styles inside lists/quotes/etc. are broken in XS screen size. But they were broken even before this PR, so I'm going to fix them later (yeah, right 😅).

---

Screenshot from my latest blog post showing the indentation bug in the 11ty plugin:

I have previously circumvented this by adding extra leading spaces to those broken lines and added <!-- prettier-ignore --> before the code block so that Prettier won't remove the extra spaces when saving the Markdown file. Then the code block looks correct on my blog, but has the unnecessary extra spaces when copy-pasting the code elsewhere. Not always a problem, but is an actual problem when copy-pasting e.g. YAML code (which is whitespace-sensitive). 😬 Plus these workarounds are a hassle to maintain.

[netlify]

✔️ Deploy Preview for mtsknn ready!

🔨 Explore the source changes: 7762adf

🔍 Inspect the deploy log: https://app.netlify.com/sites/mtsknn/deploys/6104caf121527d5beffb4126

😎 Browse the preview: https://deploy-preview-11--mtsknn.netlify.app