Emojis in hugo?

support
1

Hi,

I am trying to convert a jekyll site to hugo and I am missing one little thing. My blog uses the emoji plugin that converts github styled emojis ala :smile: into :smile: . I could not find a plugin or a way to write such a plugin. Am I missing something?

Thanks!

2

@bitboxer Hugo uses BlackFriday, a Go markdown converter. To my knowledge, it does not have native support for GFM/Jekyll-style emojis, but you may want to add a feature request to that repo. That said, you always have the option of adding the Unicode to your markdown files, but I can understand why that might be a PITA, especially if you already have a lot of content. As far as plugins, Hugo does not currently support them and therefore does not have an ecosystem to browse in that regard.

3

This seems to be just a case of adding the right HTML or images, so a few custom shortcodes sound ideal here

4
2 Likes
5

https://github.com/spf13/hugo/pull/1892

6

:clap: :slightly_smiling:

thanks!

7

Thank you for adding it.

However, I see that it is kind of custom implementation which does not show colorized images. Is there a way to have ā€˜standardā€™ ones displayed within Hugo?

1 Like
8

I would like to know this too.

9

Hugo has added a helper to help translate :smile: etc. into the Unicode emoji ā€“ how that is presented, is up to the browser.

See

10

I put :smile: in my content, but itā€™s not converted, so wonder what else is required to use emojis withing Hugo?

The only thing which I find in the docs is the emojify template function. :frowning:

Edit:: Ahh, found in the code - one has to use:

enableEmoji = true

in the configā€¦it would be nice to document it somewhereā€¦

11

Itā€™s documented, you just missed it.
Itā€™s described in the configuration doc page, https://gohugo.io/overview/configuration/
In the sample config file.

It might be elsewhere too. I know I ran across it in my own getting up to speed. Easy to miss and reasonable to think it would just work, if you have no history of the internals and why they are how they are. I assume thereā€™s a speed cost to having it enabled, otherwise not sure why it wouldnā€™t be default on.

12

I seeā€¦then itā€™s the problem of siteā€™s Search feature which does not find it. :frowning:

13

A *nix tip if youā€™re looking for a config option:

~/sites/bepsays.com  master āœ”                                                                               10d
ā–¶ hugo config | grep emoji
enableemoji: true
2 Likes
14

Still looking for COLOR emoji support. Is anyone working on this?

15

@Edward, Iā€™m just specifying them normally, and I get color no problem:

http://live.cogley.info/2017/05/01/milestones-on-parade/

They look different browser to browser but they are in color.

It is possible to style them with css. Are you doing something in css that would cause them to lose color?

16

@RickCogley is correct; Hugoā€™s emojify support is a utilify to make it simpler to write those Unicode characters ā€“ but it is up to the client to present them (colour them etc.).

17

Hi everyone, to solve this issue of uncoloured emojis, which varies client by client, I used twemoji in my site. Thus is my blog: https://blog.utkarshverma.me

My commit:

18

I know that this is an old thread but really there is no need for third party emoji fonts -unless of course there is a specific reason for using one of those-.

Here is a font stack for the various color emoji fonts used in different OSes:

font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;

So simply set enableEmoji = true in your projectā€™s config, use the above CSS and type your emoji heart out using the cheat sheet.

5 Likes
19

hey @alexandros, that is useful info. But if you donā€™t mind my asking, how do you pinpoint emoji with that font stack? For example, if I set a font for general body text, I might do:

html, body {
    font-family: 'IBM Plex Mono', monospace;
}

How are you setting that stack in practical use?

20

Typically I wrap emojis within a span element that I enter directly in a markdown content file
i.e. <span class="emoji">:smile:</p> and then I assign the rule like this:

  .emoji {
    font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
  }

HTML is perfectly valid within Markdown and also there are other CSS rules associated with the aforementioned class that are relative to the size of the emoticon and its margins.