@gerhobbelt/markdown-it-emoji
v2.0.0-12
Published
Emoji plugin for markdown-it markdown parser.
Downloads
73
Maintainers
Readme
markdown-it-emoji
Plugin for markdown-it markdown parser, adding emoji & emoticon syntax support.
v1.+ requires markdown-it
v4.+, see changelog.
Three versions:
- Full (default), with all github supported emojis.
- Light, with only well-supported unicode emojis and reduced size.
- Bare, without included emojis or shortcuts. This requires defining your own definitions and shortcuts.
Also supports emoticons shortcuts like :)
, :-(
, and others. See the full list in the link above.
Install
node.js, browser:
npm install @gerhobbelt/markdown-it-emoji --save
Use
init
var md = require('@gerhobbelt/markdown-it')();
var emoji = require('@gerhobbelt/markdown-it-emoji');
// Or for light version
// var emoji = require('@gerhobbelt/markdown-it-emoji/light');
md.use(emoji [, options]);
Options are not mandatory:
- defs (Object) - rewrite available emoji definitions
- example:
{ name1: char1, name2: char2, ... }
- example:
- enabled (Array) - disable all emojis except whitelisted
- shortcuts (Object) - rewrite default shortcuts
- example:
{ "smile": [ ":)", ":-)" ], "laughing": ":D" }
- example:
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 + '"></span>';
};
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;
}