Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arturi/hexo-filter-github-emojis
https://github.com/arturi/hexo-filter-github-emojis
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/arturi/hexo-filter-github-emojis
- Owner: arturi
- License: mit
- Created: 2019-11-20T17:42:36.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T09:37:45.000Z (about 2 years ago)
- Last Synced: 2024-10-28T06:11:42.049Z (3 months ago)
- Language: JavaScript
- Size: 189 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hexo-filter-github-emojis
[](https://npmjs.org/package/hexo-filter-github-emojis)
[](https://npmjs.org/package/hexo-filter-github-emojis)
[](https://npmjs.org/package/hexo-filter-github-emojis)
[](https://npmjs.org/package/hexo-filter-github-emojis)
A Hexo plugin that adds emoji support, using [Github Emojis API][ghemojis].
Check out the [Emoji Cheat Sheet](http://www.webpagefx.com/tools/emoji-cheat-sheet/) for all the emojis it supports.
V2 is not compatible with [V1](https://github.com/crimx/hexo-filter-github-emojis/tree/e52ceb8b18a7b06916b6cb0a887b218d49a7ab92). V1 replaces codepoints with `![]()
` tags. While V2 makes the font transparent and displays emojis with `background-image`.
## Installation
``` bash
$ npm install hexo-filter-github-emojis --save
```
## Options
You can configure this plugin in `_config.yml`. Default options:
``` yaml
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
```
- **className** - Image class name. For example :sparkles: `:sparkles:` the filter will generate something like this:
```html
✨
```
- **inject** - If true, the filter will inject proper inline styles and a script to fallback when image loading fails. If you can modify script files and style files, you may turn this off and add them yourself.
```html
```
A script tag will be appended, the className changes according to the options:
```html
document.querySelectorAll('.github-emojis')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
```
- **styles** - inline styles. For example:
```yaml
githubEmojis:
styles:
font-size: 2em
font-weight: bold
```
outputs:
```html
```
- **customEmojis** - You can specify your own list. An object or JSON string is valid. The filter will first check the `customEmojis` then fallback to the [Github Emojis][ghemojis] list.
For example:
```yaml
githubEmojis:
customEmojis:
arrow_left: https://path/to/arrow_left.png
arrow_right: https://path/to/arrow_right.png
```
If you need to add code points that are not in the Github list, you can do this:
```yaml
githubEmojis:
customEmojis:
man_juggling:
src: https://path/to/man_juggling.png
codepoints: ["1f939", "2642"]
arrow_right: https://path/to/arrow_right.png
```
## Tag
If you do not like the `::`-style keywords, you can always use tags:
```html
{% github_emoji sparkles %}
```
Add `no-emoji: true` to front-matter to stop replacing `::`:
```md
---
title: Hello World
no-emoji: true
---
:tada: as it is.
{% github_emoji tada %} still works.
```
## Helper
You can also render a GitHub emoji from a template using the `github_emoji` helper:
```html
<% github_emoji('octocat') %>
```
[ghemojis]: https://api.github.com/emojis