github emojis for hexo! 🎉

Find a file

crimx 7c15687c2b chore: bump version		2020-10-03 11:21:15 +08:00
.gitignore	first commit	2016-12-22 19:11:28 +08:00
.npmignore	Exclude .git from npm publish	2019-07-19 13:08:39 +02:00
.travis.yml	Add CI for downloading emojis	2018-10-04 19:29:18 +08:00
emojis.json	refactor: update emoji list	2020-10-03 11:10:05 +08:00
index.js	refactor: simplify implementation	2020-10-03 11:10:42 +08:00
LICENSE	update v2	2018-10-04 19:07:24 +08:00
package.json	chore: bump version	2020-10-03 11:21:15 +08:00
push.sh	Add CI for downloading emojis	2018-10-04 19:29:18 +08:00
README.md	docs: note about fancybox	2020-10-03 11:21:03 +08:00
update-emojis.js	refactor: update emoji list	2020-10-03 11:10:05 +08:00
yarn.lock	refactor: update emoji list	2020-10-03 11:10:05 +08:00

README.md

hexo-filter-github-emojis

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
  inject: true
  styles:
  customEmojis:

enable boolean=true - Enable :: emoji parsing. If off the tag and helper still work.

className string="github-emoji" - Emoji class name.
For example ✨ :sparkles: the filter will generate something like this:

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

inject boolean=true - Inject emoji styles and fallback script.
If true, the filter will inject a <style> to document <head>.
If false, the filter will not inject any style. If you can modify source style files you may turn this off and add them yourself.

Below is the injected <style>. The class name changes according to option.

<style>
  .github-emoji {
    position: relative;
    display: inline-block;
    width: 1.2em;
    min-height: 1.2em;
    overflow: hidden;
    vertical-align: top;
    color: transparent;
  }

  .github-emoji > span {
    position: relative;
    z-index: 10;
  }

  .github-emoji img,
  .github-emoji .fancybox {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    user-select: none !important;
    cursor: auto !important;
  }

  .github-emoji img {
    height: 1.2em !important;
    width: 1.2em !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    user-select: none !important;
    cursor: auto !important;
  }

  .github-emoji-fallback {
    color: inherit;
  }

  .github-emoji-fallback img {
    opacity: 0 !important;
  }
</style>

styles object={} - inline styles. For example:

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

outputs:

<span class="github-emoji" style="font-size:2em;font-weight:bold" ...>

customEmojis object={} - 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>

Fancybox

If you are using theme that enables fancybox(e.g. the default landscape theme) it is recommended to skip the github emoji imgs.

Edit themes/landscape/source/script.js

   // Caption
   $('.article-entry').each(function(i){
     $(this).find('img').each(function(){
       if ($(this).parent().hasClass('fancybox')) return;
+      if ($(this).parent().hasClass('github-emoji')) return;
 
       var alt = this.alt;
 
       if (alt) $(this).after('<span class="caption">' + alt + '</span>');
 
       $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
     });
 
     $(this).find('.fancybox').each(function(){
       $(this).attr('rel', 'article' + i);
     });
   });