gatsby-remark-twemoji-shortcut
A gatsby-transformer-remark plugin to add twitter emoji with shortcuts!✨
Install
Install package
yarn add gatsby-remark-twemoji-shortcut
or
npm install gatsby-remark-twemoji-shortcut
gatsby-config.js
Add to your // gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-prismjs`, // some other remark plugins
{
resolve: `gatsby-remark-twemoji-shortcut`,
options: {
classname: 'some_classname another_classname', // add additional classname(s) to the emoji
style: {
// add additional inline-styling to the emoji
background: 'gold'
}
}
}
]
}
},
// ...other plugins
]
};
-
The default classname is
emoji
(from twemoji) and will not be removed when additional classname is set. -
The default inline styles are as twemoji suggested:
img.emoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
The styles will be merged with default and additional (option) styles. If you pass in a css property which exists in the default, the default style would be overwritten by the additional style.
Usage
Just write emoji shortcuts in your markdown and it will be transformed into twitter emojis!
A markdown post like this:
---
datetime: "2018-06-21 11:00:24"
title: "Twitter Emojis!"
tags: ["emoji", "twitter", "plugin"]
---
Add twitter emojis with no sweat. :sunglasses::heart::tada::sparkles::1st_place_medal::+1:
This even works with plain emojis! 🌵🐦🐬
Want to skip shortcuts? Sure! Try using backslashes. \:cool\:
What if I put emojis inside a inline code? `🚆:car:🚌`
```
What if I put emojis inside a code block? 🙉:grinning:🙉
```
Get turns into this:
That's it! 🎉
Changelog
v0.10.0 release - 2018/06/18
- Add feature to skip shortcuts and plain emojis from inline codes or code blocks.
Special Thanks
- The shortcut emoji mapping is pulled from gemoji, huge thanks for this awesome list.
- This repo is inspired by other great gatsby remark emoji plugins!