Code Monkey home page Code Monkey logo

markdown-it-emoji's Introduction

markdown-it-emoji

Build Status NPM version Coverage Status

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 markdown-it-emoji --save
bower install markdown-it-emoji --save

Use

init

var md = require('markdown-it')();
var emoji = require('markdown-it-emoji');
// Or for light version
// var emoji = require('markdown-it-emoji/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" }

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

License

MIT

markdown-it-emoji's People

Contributors

rlidwka avatar erikmichelson avatar kmonsoor avatar leonya avatar samsaffron avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.