Add twitter emoji to gatsby markdown -- with shortcuts!
A gatsby-transformer-remark plugin to add twitter emoji with shortcuts!✨
yarn add gatsby-remark-twemoji-shortcut
or
npm install gatsby-remark-twemoji-shortcut
gatsby-config.js
// 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.
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! 🎉
⚠️ This is currently the most stable version and I strongly recommend user using v0.9.x upgrade to this version.