Remark-emoticons NPM

remark-emoticons

This remark plugin parses ASCII emoticons such as :D or shortcodes such as :smiling-cat:. It can be configured to parse any shortcode/emoticon you wish.

It introduces a new MDAST node type: "emoticon".

This plugin is compatible with rehype, turning the emoticons or shortcodes into HTML <img> tags with customizable classes.

AST node (see mdast specification)

interface emoticon <: Node {
  type: "emoticon";
  value: string;
  data: {
    hName: "img";
    hProperties: {
      src: string;
      alt: string;
      className: string;
    }
  }
}

Syntax

The following Markdown:

:D

if you configured the plugin with:

{
  emoticons: {
    ':D': '/static/smileys/happy.png',
  },
  classes: 'some-smiley foo',
}

will produce this AST node:

{
  type: "emoticon",
  value: ":D",
  data: {
    hName: "img";
    hProperties: {
      src: '/static/smileys/happy.png';
      alt: ":D";
      className: "some-smiley foo";
    }
  }
}

If you use rehype stringifier it will output:

<img src="/static/smileys/happy.png" alt=":D" class="some-smiley foo">

Installation

npm:

npm install remark-emoticons

Usage

Dependencies:

const unified = require('unified')
const remarkParse = require('remark-parse')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')

const remarkEmoticons = require('remark-emoticons')

Usage:

unified()
  .use(remarkParse)
  .use(remarkEmoticons, {
   emoticons: {
     ':D': '/static/smileys/happy.png',
   },
   classes: 'some-class'
  })
  .use(remark2rehype)
  .use(stringify)