/hexo-filter-emoji

🎉 GitHub emojis for Hexo!

Primary LanguageJavaScriptMIT LicenseMIT

hexo-filter-emoji

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

Options

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

emoji:
  enable: true
  className: github-emoji
  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>
  • styles - inline styles. For example:

    emoji:
      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][ghemojis] list.

    For example:

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

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

{% emoji sparkles %}

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

---
title: Hello World
no-emoji: true
---

:tada: as it is.

{% emoji tada %} still works.

Helper

You can also render a GitHub emoji from a template using the emoji helper:

<h1>{% emoji('octocat') %}</h1>