Enabling Emoji Shortcodes in Eleventy Markdown Files

#11ty #emoji #markdown

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-itnpm 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);
};