markdown-it-emoji

What is markdown-it-emoji?

The markdown-it-emoji package is a plugin for the markdown-it Markdown parser that allows you to easily include emoji in your Markdown documents. It converts emoji shortcodes (like :smile:) into their corresponding Unicode emoji characters.

What are markdown-it-emoji's main functionalities?

Basic Emoji Conversion

This feature allows you to convert emoji shortcodes into their corresponding Unicode emoji characters. By using the markdown-it-emoji plugin with markdown-it, you can easily include emojis in your Markdown content.

const md = require('markdown-it')();
const emoji = require('markdown-it-emoji');
md.use(emoji);

const result = md.render('I :heart: Markdown!');
console.log(result); // Outputs: <p>I ❤️ Markdown!</p>

Custom Emoji Definitions

This feature allows you to define custom emoji shortcodes and their corresponding Unicode characters. You can extend or override the default emoji definitions provided by the plugin.

const md = require('markdown-it')();
const emoji = require('markdown-it-emoji');
md.use(emoji, {
  defs: {
    smile: '😃',
    custom_emoji: '🚀'
  }
});

const result = md.render('I :smile: using :custom_emoji:!');
console.log(result); // Outputs: <p>I 😃 using 🚀!</p>

Custom Emoji Rendering

This feature allows you to customize the rendering of emojis. You can define how the emojis should be rendered in the final HTML output, such as wrapping them in custom HTML tags or adding CSS classes.

const md = require('markdown-it')();
const emoji = require('markdown-it-emoji');
md.use(emoji, {
  shortcuts: {
    angry: [':angry:', '>:(']
  },
  renderer: function (token, idx) {
    return '<span class="emoji emoji-' + token[idx].markup + '">' + token[idx].content + '</span>';
  }
});

const result = md.render('I am >:( right now!');
console.log(result); // Outputs: <p>I am <span class="emoji emoji-angry">😠</span> right now!</p>

Other packages similar to markdown-it-emoji

emojione

The emojione package provides a comprehensive set of emoji images and a JavaScript library for converting emoji shortcodes, Unicode characters, and ASCII emoticons into emoji images. Compared to markdown-it-emoji, emojione offers more customization options for rendering emojis as images rather than Unicode characters.

emoji-dictionary

The emoji-dictionary package provides a simple way to look up emoji characters by their names or shortcodes. It is more focused on providing a dictionary of emojis rather than integrating with Markdown parsing, making it a more lightweight option compared to markdown-it-emoji.

markdown-it

The markdown-it package is a Markdown parser that can be extended with plugins like markdown-it-emoji. While markdown-it itself does not provide emoji support out of the box, it serves as the foundation for adding such functionality through plugins.

README

markdown-it-emoji

Plugin for markdown-it markdown parser, adding emoji & emoticon syntax support. Also supports emoticons shortcuts like :), :-(, and others.

NOTE. v3 changed exports, see below.

Install

npm install i markdown-it-emoji

Use

init

//
// { full, light, bare } configs available.
//
//  full:  includes all available emojis support
//  light: includes small subset of most useable emojis
//  bare:  no defaults
//
// Also CJS & UMD builds available in `dist/` folder of published package,
// if your env not supports ESM modules use.
//
import { full as emoji } from 'markdown-it-emoji'
import markdownit from 'markdown-it'

const md = markdownit().use(emoji/* , options */);

Options are not mandatory:

• defs (Object) - rewrite available emoji definitions
  • example: { name1: char1, name2: char2, ... }
• enabled (Array) - disable all emojis except whitelisted
• shortcuts (Object) - rewrite default shortcuts
  • example: { "smile": [ ":)", ":-)" ], "laughing": ":D" }

Differences in browser. If you load the script directly into the page without using a package system, the module will add itself globally with the name markdownitEmoji.

change output

By default, emojis are rendered as appropriate unicode chars. But you can change the renderer function as you wish.

Render as span blocks (for example, to use a custom iconic font):

// ...
// initialize

md.renderer.rules.emoji = function(token, idx) {
  return '<span class="emoji emoji_' + token[idx].markup + '"></span>';
};

Or use twemoji:

// ...
// initialize

import twemoji from 'twemoji'

md.renderer.rules.emoji = function(token, idx) {
  return twemoji.parse(token[idx].content);
};

NB 1. Read twemoji docs! In case you need more options to change image size & type.

NB 2. When using twemoji you can make image height match the line height with this style:

.emoji {
  height: 1.2em;
}

In your markdown file

Hello from mars :satellite:

becomes

Hello from mars 📡