Today I Learned: collection of notes, tips and tricks and stuff I learn from day to day working with computers and technology as an open source contributor and product manager

View project on GitHub

Use emojis

You can use a lot of different emojis on GitHub :astonished:

This mean you can communicate using small icons :lollipop: :ok_hand:

It works in GitHub Wikis, but it does not necessarily render correctly in the HTML if you are using GitHub pages.

See this example, which is the HTML rendering of this page, which is written in Markdown.

The solution to getting the emojis to render correctly is using the Jekyll plugin: jemoji.

Add the following to your site’s Gemfile

gem 'jemoji'

And add the following to your site’s _config.yml

  - jemoji

And then you will see your emojis rendered correctly in the HTML version served under GitHub Pages, based on your Markdown, where you can specify emojis as :awesome:

Do note that GitHub uses it’s own CDN (https://github.githubassets.com), as mentioned in the jemoji documentation.

This mean that you cannot see the result locally, when testing your GitHub pages rendering as HTML.

$ bundle exec jekyll serve --incremental

Luckily there is a remedy as hinted at in the jemoji documentation, using another package called gemoji.

Local Use

As hinted at in the jemoji documentation, via using gemoji.

Do note that this is not included in the gemoji on GitHub, but on Rubydocs.

$ gem install gemoji
$ bundle exec gemoji extract assets/images/emoji

And you should get a directory structure like this. This of course integrates with my setup and your file structure might be different, this however is compatible with GitHub pages.

$ exa -D --tree assets/
└── images
   └── emoji
      └── unicode

If you do not use exa, but tree:

$ tree -d assets/
└── images
    └── emoji
        └── unicode

If you do not use exa or tree, but find:

$ find assets -type d

Finally you specify the new directory to use when rendering locally in the _config.yml.

  - jemoji

  src: "/assets/images"

And your should be good to go:

$ bundle exec jekyll serve --incremental

I am excluding the generated directory from being published to GitHub and I am not including the emoji section in the _config.yml.

I have no clue if the setting clashes with the use of the GitHub CDN and it will require some more experimentation at some point.

Resources and References

  1. GitHub: jemoji
  2. GitHub: gemoji
  3. RubyDoc: gemoji
  4. Gist by @rzaviers containing all the emojis