Adding a shortcode in 11ty

I really dig the simplicity of writing in Markdown. I've been using it for notes at work and home for several years now and really appreciate how portable my collection of notes has been as a result. And really, it is one of the things that attracted me to rebuild my site with 11ty.

Recently, I ran across a little situation during that rebuild worth sharing. Normally, I'd insert an image in markdown like so:

![image description](/dir/image-file.jpg)

However, sometimes I want to apply a special treatment to an image and can't do what I'd like w/o some extra HTML. I could just toss the HTML in my markdown document. That'd totally work, but then I have to remember that extra HTML for future use and format it in exactly the same way. Plenty of room for error.

Coming from years of WordPress development and the land of milk and honeyshortcodes, it made me wonder if I could achieve a similar function in 11ty.

Shortcode?

config.addShortcode("yourShortcode", function (arg1, arg2) {
  return `<div class="${arg1} other-classes blah"><img src="${arg2}" /></div>`;
});

So...

config.addShortcode("highlightImage", function (imageURL, alt) {
  return `<div class="image-highlight">
  <div class="image-highlight-inner">
    <img src="${imageURL}" alt="${alt}" />
  </div>
</div>`;
});

Usage in .md files

{% highlightImage "https://res.cloudinary.com/container/image/upload/vid/image-file.png", "alt text here" %}

Example output

Bingo.