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
Netlify Functions in Javascript with Type-Checking