Skip to content
github emojis for hexo! 🎉
JavaScript Shell
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
emojis.json
index.js replace cheerio with jsdom Aug 14, 2019
package-lock.json
package.json bump version Aug 14, 2019
push.sh Add CI for downloading emojis Oct 4, 2018
update-emojis.js update emoji Aug 14, 2019

README.md

hexo-filter-github-emojis

Npm Version Npm Downloads Month Npm Downloads Total License

A Hexo plugin that adds emoji support, using Github Emojis API.

Check out the Emoji Cheat Sheet for all the emojis it supports.

V2 is not compatible with V1. V1 replaces codepoints with <img> tags. While V2 makes the font transparent and displays emojis with background-image.

Installation

$ npm install hexo-filter-github-emojis --save

Options

You can configure this plugin in _config.yml. Default options:

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:
  • className - Image class name. For example :sparkles: the filter will generate something like this:

    <span class="github-emoji" style="background-image:url(https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png?v8)" data-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png?v8">&#x2728;</span>
  • 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.

    <span class="github-emoji" style="color:transparent;background:no-repeat url(...) center/contain" ...>

    A script tag will be appended, the className changes according to the options:

      <script>
        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);
          });
      </script>
  • styles - inline styles. For example:

    githubEmojis:
      styles:
        font-size: 2em
        font-weight: bold

    outputs:

    <span class="github-emoji" style="font-size:2em;font-weight:bold;background-image:url(...)" ...>
  • 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 list.

    For example:

    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:

    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:

{% github_emoji sparkles %}

Add no-emoji: true to front-matter to stop replacing :::

---
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:

<h1><% github_emoji('octocat') %></h1>
You can’t perform that action at this time.