Sal’s

Adding an <aside> element with 11ty

For some time now, I’ve been wanting to try using <aside> elements in this blog for … asides, I guess. You know, those “btw…” sorts of comments, but in cases where a footnote feels like too much faff.

Thanks to the neighborhood crows, who were particularly escalated this morning at 5:45 right outside my bedroom window, I found myself with some extra time to devote to this. In case it’s helpful to anyone, here’s how I dunnit.

First attempt: raw html

At first I just used the <aside> html in my markdown post. But I quickly learned that this bypasses 11ty’s markdown processing (specifically, markdown-it’s processing with the typographer flag set to true), so quotes and apostrophes don’t get converted to the curly/fancy versions.

Better: 11ty paired shortcodes

To address the problem above, I added a paired shortcode in my eleventy.config.js file. Pertinent excerpts:

// eleventy.config.js
import markdownIt from "markdown-it";

export default async function (eleventyConfig) {
  // I already had this:
  const md = markdownIt({
    html: true,
    // convert straight quotes & apostrophes to curlies
    typographer: true,
  });
  
  // this was the net-new part:
  eleventyConfig.addPairedShortcode("aside", function (content) {
    // process the content with markdownIt
    const renderedContent = md.renderInline(content.trim());
    return `<aside class="blog-aside">${renderedContent}</aside>`;
  });
}

Now, in my markdown posts, I can do this:


{% aside %}
Btw...
{% endaside %}

And it turns into this:

Cool beans.

#blogging #css #11ty #crows