remark-emoticons
v2.3.2
Published
This [remark][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.
Downloads
84
Readme
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)