Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tri613/gatsby-remark-twemoji-shortcut
Add twitter emoji to gatsby markdown -- with shortcuts! :sunglasses::sparkles:
https://github.com/tri613/gatsby-remark-twemoji-shortcut
emoji gatsby gatsby-plugin gatsby-remark gatsbyjs
Last synced: 3 months ago
JSON representation
Add twitter emoji to gatsby markdown -- with shortcuts! :sunglasses::sparkles:
- Host: GitHub
- URL: https://github.com/tri613/gatsby-remark-twemoji-shortcut
- Owner: tri613
- Created: 2018-06-12T15:27:24.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-10T08:25:26.000Z (almost 6 years ago)
- Last Synced: 2024-04-23T22:55:26.864Z (9 months ago)
- Topics: emoji, gatsby, gatsby-plugin, gatsby-remark, gatsbyjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/gatsby-remark-twemoji-shortcut
- Size: 99.6 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gatsby-remark-twemoji-shortcut
A [gatsby-transformer-remark](https://github.com/gatsbyjs/gatsby/tree/master/packages/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
```
### Add to your `gatsby-config.js`
```javascript
// 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](https://github.com/twitter/twemoji#inline-styles):
```css
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
:warning: This is currently the most stable version and I strongly recommend user using v0.9.x upgrade to this version.
- Add feature to skip shortcuts and plain emojis from inline codes or code blocks.
## Special Thanks
- The shortcut emoji mapping is pulled from [gemoji](https://github.com/github/gemoji), huge thanks for this awesome list.
- This repo is inspired by other great gatsby remark emoji plugins!
- https://github.com/matchilling/gatsby-remark-emojis
- https://github.com/Rulikkk/gatsby-remark-emoji