What is remark-emoji?
The remark-emoji npm package is a plugin for the remark processor that allows you to convert text-based emoji shortcodes into their corresponding Unicode emoji characters. This can be particularly useful for rendering markdown content with emojis in a more visually appealing way.
What are remark-emoji's main functionalities?
Convert Emoji Shortcodes to Unicode
This feature allows you to convert text-based emoji shortcodes (e.g., :heart:) into their corresponding Unicode emoji characters (❤️). The code sample demonstrates how to use the remark-emoji plugin with the remark processor to achieve this conversion.
const remark = require('remark');
const emoji = require('remark-emoji');
const markdown = 'I :heart: remark-emoji!';
remark()
.use(emoji)
.process(markdown, function (err, file) {
if (err) throw err;
console.log(String(file));
});
Other packages similar to remark-emoji
markdown-it-emoji
The markdown-it-emoji package is a plugin for the markdown-it parser that converts emoji shortcodes into Unicode emoji characters. It offers similar functionality to remark-emoji but is designed to work with the markdown-it ecosystem instead of remark.
emojione
The emojione package provides a comprehensive set of tools for working with emojis, including converting shortcodes to Unicode and vice versa. While it offers broader functionality beyond just markdown processing, it can be used in conjunction with markdown parsers to achieve similar results to remark-emoji.
emoji-dictionary
The emoji-dictionary package provides a simple way to convert emoji shortcodes to Unicode characters and vice versa. It is a lightweight alternative that can be integrated into various text processing workflows, including markdown processing, to achieve similar functionality to remark-emoji.
remark-emoji is a remark plugin to replace :emoji:
to real UTF-8
emojis in Markdown text. This plugin is built on top of node-emoji.
The accessibility support and Emoticon support are optionally available.
Demo
You can find a demo in the following Codesandbox.
Usage
remark().use(emoji [, options]);
import { remark } from 'remark';
import emoji from 'remark-emoji';
const doc = 'Emojis in this text will be replaced: :dog::+1:';
const processor = remark().use(emoji);
const file = await processor.process(doc);
console.log(String(file));
Note:
- This package is ESM only from v3.0.0 since remark packages migrated to ESM.
- This package supports Node.js v18 or later.
Options
options.accessible
Setting to true
makes the converted emoji text accessible with role
and aria-label
attributes. Each emoji
text is wrapped with <span>
element. The role
and aria-label
attribute are not allowed by default. Please
add them to the sanitization schema used by remark's HTML transformer. The default sanitization schema is exported
from rehype-sanitize package.
For example,
import remarkParse from 'remark-parse';
import toRehype from 'remark-rehype';
import sanitize, { defaultSchema } from 'rehype-sanitize';
import stringify from 'rehype-stringify';
import emoji from 'remark-emoji';
import { unified } from 'unified';
const schema = structuredClone(defaultSchema);
if ('span' in schema.attributes) {
schema.attributes.span.push('role', 'ariaLabel');
} else {
schema.attributes.span = ['role', 'ariaLabel'];
}
const processor = unified()
.use(remarkParse)
.use(emoji, { accessible: true })
.use(toRehype)
.use(sanitize, schema)
.use(stringify);
const file = await processor.process('Hello :dog:!');
console.log(String(file));
yields
Hello <span role="img" aria-label="dog emoji">🐶</span>!
Default value is false
.
options.padSpaceAfter
Setting to true
means that an extra whitespace is added after emoji.
This is useful when browser handle emojis with half character length and following character is hidden.
Default value is false
.
options.emoticon
Setting to true
means that emoticon shortcodes are supported (e.g. :-)
will be replaced by 😃). Default value is false
.
TypeScript support
remark-emoji package contains TypeScript type definitions. The package is ready
for use with TypeScript.
Note that the legacy node
(or node10
) resolution at moduleResolution
is not available since it enforces CommonJS module resolution and this package is ESM only. Please use node16
,
bundler
, or nodenext
to enable ESM module resolution.
License
Distributed under the MIT License.