npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

remark-emoji

v5.0.1

Published

Emoji transformer plugin for Remark

Downloads

1,783,272

Readme

remark-emoji

CI npm

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));
// => Emojis in this text will be replaced: 🐶👍

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

// Allow using `role` and `aria-label` attributes in transformed HTML document
const schema = structuredClone(defaultSchema);
if ('span' in schema.attributes) {
    schema.attributes.span.push('role', 'ariaLabel');
} else {
    schema.attributes.span = ['role', 'ariaLabel'];
}

// Markdown text processor pipeline
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.