Using reveal-md with emojis everywhere!

Thursday, March 14, 2019

7 min read

Last time I presented you the awesome reveal-md tool that I use to create impressive technical slideshows.

One of the things I use too much is emojis. I tend to put them everywhere possible, for me they are like a form of modern ideograms that future generations will find etched on glass pyramids…

via GIPHY

However, for the time being, I still have an issue with how emojis are supported.

Going back to reveal-md, when I exported to PDF, the emojis were broken, and the same thing happened for my Windows 7 co-workers when they were looking at the exported website or when I was presenting from that kind of OS.

Thus, I was in need of a way to transform emojis to images inside my presentations.

Time to present item number 9 on my “I ❤️ reveal” list of reveal’s preferred feature!

via GIPHY

Preprocessor to the rescue

reveal-md has a preprocessor option that allow us to pass it a JavaScript file that will apply some code to change the markdown before presenting it. And, this my dear reader, is exactly what I needed to solve my emojis issue!

Combined with Twemoji, I could parse all my presentation’s markdown and convert emoji Unicode strings to image tags with SVG.

via GIPHY

Twemoji

What is it?

It is an open source library made by Twitter. It contains their whole collection of emojis! There is also a JavaScript API that can parse text or DOM nodes to replace emoji Unicode characters with tags.

Here is the attribution:

Copyright 2018 Twitter, Inc and other contributors Code licensed under the MIT License: http://opensource.org/licenses/MIT Graphics licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/

Thank you Twitter 😘

Installation

So, I installed it in my repo using:

npm install --save twemoji

Free the emojis!

Now we can look at how we will combine Twemoji with a reveal-md preprocessor to make the emojis free from the OS and browsers!

reveal-md Preprocessor using twemoji

The preprocessor is really simple:

// emoji2svgimg.js
const twemoji = require('twemoji');

module.exports = (markdown, options) => {
  return new Promise((resolve, reject) => {
    return resolve(
      twemoji.parse(markdown, {
        folder: 'svg',
        ext: '.svg'
      })
    );
  });
};

As you see it returns the Promise that it will have transformed the markdown using twemoji.parse.

Wait a minute.

via GIPHY

If you don’t know Promises, I urge you to go watch this YouTube video – MPJ is just 🤩