Home

Home | Install | Emojis-image | Emojis-text | Add Emojis | Remove Emojis | Permissions | Change Log

Sections: Inserting Emojis ( Inline | From menu ) | Settings ( Insert as Image | Case Sensitive | Emoji Height | Emoji Zoom | Sources | Add (Remove) Source | Refresh Sources | Restore Defaults | Close Panel ) | Future Plans

Inserting Emojis

You can insert the emojis into the page using two methods: inline or from the collections menu

Inline

Text Emojis

• Start typing ~ in the textarea

  

  After entering the tilde (~), the GitHub Custom Emoji autocomplete will open.

• Now enter key words, separated by commas and without spaces, that would be associated with the text emoji you want to add.

  ~simple,smile
  

• Because text emojis are usually very similar, a lot share the same key words. So, select the desired emoji from the dropdown by selecting it with a mouse or by pressing Enter.

Image Emojis

• Start typing :_ in the textarea

  

  When you first enter the colon (:), the GitHub emoji popup opens; but after entering an underscore (_), the GitHub Custom Emoji autocomplete opens.

• Now enter the named emoji (e.g. :_tuzki_calm_down:), you shouldn't have to enter the entire emoji name because the autocomplete will update while you type. So once the emoji you want shows up, highlight it (use the up and down arrow keys, or hover over it with the mouse) then click or press Enter to add it. Use Shift + Click or Enter to insert the image HTML instead of the text.

  

• Alternatively, if you don't know the name of the emoji, enter labels that would match the emoji. For example, the :_tuzki_calm_down: emoji has the following associated labels (see Emojis for a full list of labels for each emoji):

  tuzki crazy rabbit calm down wake up

  In this case, you enter :_ followed by any of the above labels, separated by commas only (no spaces)

  

  The autocomplete will quickly find the emoji you want.

From Menu

• Click on the Emoji icon to open the "Emoji Collections" dropdown.

• Select a collection, then scroll (mousewheel or arrow keys) through the list to find the emoji (text or image) you want.

• Click or press Enter to add the emoji; for images you can also use Shift + Click or Enter to insert the image HTML instead of the text.

  

Settings

Open the settings panel by either:

• Clicking on the Emoji icon, then clicking on the gear icon in the "Emoji Collections" drop down.

• Using the keyboard shortcut: press the g then = (equals) keys within one second of each other.

Insert as Image

Checked

After selecting an emoji, it will be inserted into the textarea as an image HTML.

<img alt="ghe-emoji" title=":_emoji_name:" src="...githubcloud...gif">

This happens when you select an emoji from the autocomplete dropdown or the emoji collections drop down.

Notes:

• If you enter an emoji name without pressing Enter or clicking on the autocomplete drop down, only the text will be entered.
• The alt="ghe-emoji" is added to target the image using css to allow active zooming (zoom while clicked).

Unchecked

After selecting an emoji, it will be inserted as plain text following the emoji format

:_emoji_name:

When the page loads, or a preview is seen, the emoji format will be replaced by the appropriate image.

Note:

• It doesn't matter where on the page the emoji name is added, it should be replaced.
• This script is still in alpha testing, so complete coverage may not be obtained. Please report any issues.

Case Sensitive

• Setting this checkbox will make emoji names case sensitive, so you can have different levels of lol if you want (e.g. little lol, medium Lol, or big LOL).
• Currently, all default emojis use lower case.

Emoji Height

• The slider sets both the minimum and maximum emoji height.
• These settings are applied to the emojis on the page as well as the emojis in the autocomplete and collections dropdowns.
• By default, the minimum height is set to 20px and the maximum height is set to 40px.
• Only height limitations are set as some emojis are very wide (e.g. :_onion_head_merrychristmas:)

Emoji Zoom

• This slider sets the zoom level applied to the emoji when you make it active (click and hold the mouse on it).
• The emoji is temporarily made bigger to better see it.
• To disable this zoom, set the zoom level to 1.
• Note When adding the emoji as HTML, GitHub will wrap the image in a link so clicking on the image will open a new tab... unless you release the mouse button away from the image (like drag-and-drop).

Sources

You can add or remove sources for the available emoji collections by using these settings.

Removing a collection won't stop an emoji from being shown if it was added as HTML, but it won't replace the emoji name format of the removed collection.

Adding a collection will only add more options to your browser, and will not be shared with others.

Add (Remove) Source

Use this button to add a new source input so you can add a URL pointing to your collection json file.

Press the "X" button next to the input to remove it.

Refresh Sources

After adding new sources, press this button to load the json source.

If you add a ?debug to the page URL, any json loading or parsing errors will show up in the console.

Restore Defaults

Use this button to restore the script defaults.

Using this button will not remove any added sources! But it will restore any of the default sources if any were removed.

Close Panel

Close the settings panel by clicking outside of the panel, or pressing the Esc (escape) key.

Future Plans

• If this userscript becomes popular enough, I may consider turning it into a browser extension.

• To do:

  • Emoji replacing selected text. The current caret extension only adds to the end of the selection.
  • Find a more reliable method to replace emojis on the page without compromising speed.

• Ideas:

  • Add emoji to "misc" collection from textarea after drag and drop; then save to gist?