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;
}
}
}The following Markdown:
:Dif 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">npm:
npm install remark-emoticonsDependencies:
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)