Enabling Emoji Shortcodes in Eleventy Markdown Files

In moving my blog from hugo to eleventy I noticed my emoji shortcodes (ie: writing :fire: and having the 🔥 emoji show up in the generated page) weren't working. 😦

Some quick internet searching didn't turn up a direct result (thus this blog post), but I did stumble upon the answer in the eleventy docs around markdown. We need to tell eleventy to use the markdown-it-emoji plugin with a couple simple steps.

Step 1: Install markdown-it and the markdown-it-emoji plugin

npm i -D markdown-it
npm i -D markdown-it-emoji

Step 2: Update .eleventy.js config file and register the emoji plugin

module.exports = function (eleventyConfig) {
// setup markdown to use emoji plugin
const markdownIt = require("markdown-it");
const markdownItEmoji = require("markdown-it-emoji");
const markdownLib = markdownIt({ html: true }).use(markdownItEmoji);
eleventyConfig.setLibrary("md", markdownLib);

Now emoji shortcodes work! 💪 🔥 💥

Hopefully you found this post helpful, if you have any questions you can find me on Twitter.

How to Write TypeScript Interfaces in JSDoc Comments