Skip to main content

@mdit/plugin-emoji

Emoji plugin for markdown-it.

Install

pnpm
pnpm add @mdit/plugin-emoji

Usage

import MarkdownIt from "markdown-it";
import { fullEmoji } from "@mdit/plugin-emoji";

const mdIt = MarkdownIt().use(fullEmoji);

mdIt.render("Hello from mars :satellite:");

Different presets are available:

  • fullEmoji: includes all available emojis support
  • lightEmoji: includes small subset of most useable emojis
  • bareEmoji: no defaults, only includes those you defined in options

Syntax

  • :emoji_name:
  • shortcuts like :), :D, etc. (if enabled)

Demo

Hello from mars 📡

Classic shortcuts: 😃 😦

Demo
Hello from mars :satellite:

Classic shortcuts: :-) :-(

Options

definitions

  • Type: Record<string, string>
  • Default: {} (preset dependent)

Rewrite available emoji definitions. The key is the emoji name, and the value is the emoji character.

Example: { name1: 'char1', name2: 'char2', ... }

enabled

  • Type: string[]
  • Default: []

If specified, only emojis in this list will be rendered. Otherwise, all emojis in the definitions will be rendered.

shortcuts

  • Type: Record<string, string | string[]>
  • Default: {} (preset dependent)

Rewrite default shortcuts. The key is the emoji name, and the value is the shortcut(s) for the emoji.

Example: { "smile": [ ":)", ":-)" ], "laughing": ":D" }

Custom Renderer

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

For example, to use twemoji:

import MarkdownIt from "markdown-it";
import { fullEmoji } from "@mdit/plugin-emoji";
import twemoji from "twemoji";

const mdIt = MarkdownIt().use(fullEmoji);

mdIt.renderer.rules.emoji = (tokens, idx) => {
  return twemoji.parse(tokens[idx].content);
};

And you can make image height match the line height with this style:

.emoji {
  height: 1.2em;
}