Adding syntax highlighting to an eleventy site

My plan is to use this space as a playground. To use this space as my personal jungle gym but adding small things as often as possible. I plan on writing more tutorials and creating small projects to keep my skills sharp, but to also explore more JAMstack capabilities. My first step in getting the site ready was to add syntax highlighting.

Luckily this process is so easy thanks to the 11ty documentation and the syntax highlight plugin.

The steps are simple

1. Add the plugin via npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev
2. Include the plugin and initialize it in your .eleventy.js file
3. Add your own PrismJS css theme — I chose dracula, because it matches my VSCode theme
4. Start using it in your markdown

A little test

<a href="#" class="swap-on-hover">
  <i class="icon fa-thin fa-album fa-8x"></i>
  <i class="icon fa-thin fa-album-collection fa-8x"></i>
</a>

I also added Font Awesome to spice things up a bit visually. I still want this site to be performant, so I had to make a few tweaks to the default settings in order to make sure this would be performant.

1. Added preconnect for kit.fontawesome.com
2. Changed from the default setting of webfont loading to svg loading. They provided a nice breakdown of features in the documentation
3. Added defer to the script tag for my kit

We'll see how this plays out in the 11ty leaderboards. I submitted last week and noticed an accessibility issue with my text contrast in light mode, so every little things counts.

Now I need to start my running streak again, I'll be running the BK Half Marathon in May.