Dealing with Emojis in Vim and MacOS

OK so this is a Monday question, for a long time I’ve just wanted Emoji’s inside Vim, so what are the considerations to make this work:

Why you want everything in UTF-8

First of all just to demystify, an emoji to a computer is just another Unicode character. Unicode is a huge character set that is designed to include basically every character every invented by people.

I can remember distinctly, someone, was it Brian, I’ve forgotten his name, barging into my office explaining how important it was to move from Code Pages where Windows would switch from one character set to another to just have a 32-bit Unicode number and no switching. Before Unicode, you had to know the Code page and the encoding (think of it like segmented memory), but with Unicode, you could just have one character set that was of course huge. The trick is to use variable encoding called UTF-8 so that characters that are frequently used only need 1 byte. Pretty clever as long as you have a fast computer.

Having a font that displays all Unicode characters

That’s a long way of saying that you definitely want to use UTF-8 in your website and every thing. So for instance, if your browser is UTF-8, you can see me say “Thank You” in English and Chinese 谢谢 without any problems.

Now of course, we have a new set of characters call Emojis and the solution is to give them their own Unicode points, so now I can say thank you in Emoji too! 🙏🏻 And I can even change the color of the hands because they are new Unicode as well (which is appropriate on MLK day!) 🙏🏿.

The good news is that most modern fonts support this so for instance the FiraCode Nerd Font Mono that I use with iTerm2 works perfectly as does this default Mac font, San Francisco.

Entering Emojis, the Gitmoji and the real Emoji

Of course as a programming it is pretty inconvenient to have representations like this because you have to either know the Unicode number to enter something or you have to enter the Emoji data entry mode. Instead, there’s a simple GitHub Short codes so the idea is that if you enter

:boom: :heart: :smile:

💥❤️🙏🏻

Then it should automatically translate into the equivalent Emojis. On a Mac, you turn on Emoji Viewer and then scroll up to reveal the Search box and type these in.

So how to enter on a Mac?

Well to enter things into Vi, you need a font (as discussed that displays then) and then an easier way then opening up the Emoji Viewer and use the shortcut Ctrl-Command-Space or with all the emoji power (which includes the strange Mac characters for Option and Command).

The way you can set all this with the Keyboard System Preferences which lets you enable it with System Preferences. Note that this will get you the Character Viewer and then you hit expand on the upper right which turns it from an Emoji viewer to a complete character set viewer.

So for instance to display the Command key in MacOS and then you have to enable Technical Symbols to see them (whew!). So after you click on that tiny symbol on the upper left, there is another nearly invisible gear icon on the upper right (it is greyed and very small, click on it and a huge number of additional lists are opened up. You want Technical Symbols, although when I was there I turned on Windows Dingbats for sentimental reasons.

So it turns out that the Command key is actually a Place of Interest sign ⌘ and the Option key which I have no idea what it means ⌥

In addition, you have to know the Unicode points, but there are actually these things as actually keys. These are hard to get to, but you can just copy them from websites like this one now:

  •  Command (or Cmd) called Place of Interest in Technical Symbols
  •  Shift called Upwards White Arrow in Technical Symbols
  •  Option (or Alt) called Option Key in Technical Symbols
  •  Control (or Ctrl) and Up Arrowhead in Technical Symbols

Entering in Vim as markdown or Unicode

Now with Vim, you can use the native Mac entry system, but of course there are plugins to help you. The first let’s you quick direct entry of Emojis with vim-emoji-complete where you use <C-X><C-E> to to the eXtra Enter. Or with my new found love of Unicode, you could write this as ⌃X and ⌃E.

The second is vim-emoji which lets you type :boom: and has autocomplete as well that you get with <C-X><C-U> so just type the : and then you can select the proper GitHub Markdown Emoji. This Markdown is used in lots of other places like Slack for instance.

I’m Rich & Co.

Welcome to Tongfamily, our cozy corner of the internet dedicated to all things technology and interesting. Here, we invite you to join us on a journey of tips, tricks, and traps. Let’s get geeky!

Let’s connect