github emojis for hexo! 🎉
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit e52ceb8 Jan 5, 2018
Permalink
Failed to load latest commit information.
.gitignore
.npmignore
LICENSE
README.md
emojis.json
index.js
package.json

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.

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
  unicode: false
  styles:
  localEmojis:

The filter will try to download the latest version of Github Emojis list. If the network is unavailable or too slow it will use the backup version.

  • className - Image class name. For :sparkles: the filter will generate something like this:

    <img class="github-emoji" title=":sparkles:" alt=":sparkles:" src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png" height="20" width="20">
  • unicode - If you set this option to true, the filter will generate something like this:

    <span class="github-emoji" title=":sparkles:" data-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png">&#x2728;</span>

    Then you can fallback to image with JavaScript. For example, with jQuery:

      $('span.github-emoji').each(function (i, emoji) {
        var $emoji = $(emoji)
        var codepoint = $emoji.html()
        $('<img height="20" width="20">')
          .on('error', function () {
            // image loading failed
            $emoji.html(codepoint)
          })
          .prop('alt', $emoji.attr('title'))
          .prop('src', $emoji.data('src'))
          .appendTo($emoji.empty())
      })
  • styles - inline styles for the images. For example:

    githubEmojis:
      styles:
        display: inline
        vertical-align: bottom

    outputs:

    <img class="github-emoji" style="display:inline;vertical-align:bottom" ...>
  • localEmojis - You can specify your own list. An object or JSON string is valid. The filter will first check the localEmojis then fallback to the Github Emojis list.

    For example:

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