markdown-it-emoji-mart

Plugin for markdown-it markdown parser, adding emoji & emoticon syntax support.

Support emojis from emoji-mart Emoji Picker.

v1.+ requires markdown-it v4.+, see changelog.

Two versions:

• Full (default), with all github supported emojis.
• Light, with only well-supported unicode emojis and reduced size.

Also supports emoticons shortcuts like :), :-(, and others. See the full list in the link above.

Install

node.js, browser:

npm install markdown-it-emoji-mart --save
bower install markdown-it-emoji-mart --save

Use

init

var md = require('markdown-it')();
var emoji = require('markdown-it-emoji-mart');
// Or for light version
// var emoji = require('markdown-it-emoji-mart/light');

md.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" }
• native (Boolean) - WIP, default false. When true, it will parse unicode emojis.

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. Init code will look a bit different in this case:

var md = window.markdownit().use(window.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}">${token[idx].content}</span>`;
};

.emoji {
  font-size: 1.2em;
}

Or use twemoji:

// ...
// initialize

var twemoji = require('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;
}