Best way to implement custom emoji

support
2

@jaclyntan

I like your timing. :smiley:

I have just submitted a PR over here: Update HugoBasicExample Content by onedrawingperday · Pull Request #45 · gohugoio/hugoBasicExample · GitHub that documents a technique to achieve the use of non Unicode emoji in Hugo.

The following quote is from the file over here:

If you feel restricted by Unicode Standard emoji and want to use custom emoji the replaceRE function makes it easy to perform Static Image Replacement in Hugo.

In this example we will be using emoji from the Mutant Standard set.

  • Do not use enableEmoji in your Hugo project’s configuration

  • Store the icons of the custom emoji set under /static/

  • Use the shorthand codes provided by the custom emoji set in your content files e.g. :orc:

  • In your templates execute the Image Replacement like so:

{{ replaceRE “(\:([a-zA-Z0-9_]*)\:)” <img class="emoji" src="/${2}.svg" alt="${1}" title="${1}"> .Content | markdownify | safeHTML }}
{{< /highlight >}}

N.B. The above RegEx captures all alphanumerics and underscores within two colon : characters (amend it according to your custom emoji set’s specification).

3 Likes