Skip to content

Commit

Permalink
feat(ui): add support for emoji
Browse files Browse the repository at this point in the history
  • Loading branch information
hugo-sid committed Mar 11, 2023
1 parent 19bdd10 commit f5a0718
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 8 deletions.
2 changes: 0 additions & 2 deletions assets/sass/_code.scss
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,6 @@ pre {
background: #424546;
}



> code {
color: white;
max-width: 50rem;
Expand Down
3 changes: 3 additions & 0 deletions exampleSite/config.toml
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ theme = "hugo-blog-awesome"
googleAnalytics = '' # G-MEASUREMENT_ID


# Enable emojis globally
enableEmoji = true

# set markup.highlight.noClasses=false to enable code highlight
[markup]
[markup.highlight]
Expand Down
10 changes: 4 additions & 6 deletions exampleSite/content/posts/emoji-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,19 @@ Emoji can be enabled in a Hugo project in a number of ways.
<!--more-->
The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).

To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
To enable emoji globally, set `enableEmoji` to `true` in your site's `config.toml`. You can type emoji shorthand codes directly in content files; e.g.

:see_no_evil:
:hear_no_evil:
:speak_no_evil:
`:see_no_evil:` :see_no_evil: `:hear_no_evil:` :hear_no_evil: `:speak_no_evil:` :speak_no_evil:

I :heart: Hugo!
I :heart: Hugo! 😁

The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.

***

**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.

{{< highlight html >}}
{{< highlight css >}}
.emoji {
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
}
Expand Down

0 comments on commit f5a0718

Please sign in to comment.