Syntax highlighting with the new CSS Custom Highlight API

Inspired by the post from David Bushell, I spent some time to add syntax highlighting to the blog.
It has been an item on my todolist for a long time.
I've always hesitated as I wanted to avoid having server-side rendering that generates a big amount of HTML tags just to add some color.
But now with the approach of using the new CSS Custom Highlight API, this is no longer an issue, as no additional HTML tags are injected.

To make things easy I built my solution on top of the custom <syntax-highlight> element.
This makes it very smooth to add syntax highlighting in a post.
For example the following is the source code for the helloworld.c post:

<pre><syntax-highlight language="c">void main(){puts("Hello World.\n");}</syntax-highlight></pre>

The custom element uses Prism to tokenize the text, which brings support for over 250 different languagues.
This is great, as I've accumulated quite a collection of different code snippets over the years.
There is some Terraform, Python, Perl, PHP, Bash, CSS, Javascript, HTML, Nginx and plenty of others 😎