During my searches through the 11ty documentation, I stumbled upon the official syntax highlighting plugin offered by 11ty. The beauty of this plugin is that it does everything during build-time. This means that there is no need for any client-side JavaScript. 🙌

As an example of how this new syntax highlighting looks for now, here you can see a case with the configuration for the syntax highlighting plugin itself:

const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");

module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(syntaxHighlight);
};