GEmojiSharp

GitHub Emoji for C# and .NET:

• netstandard2.0
• ASP.NET Core
• Blazor
• dotnet tool
• PowerToys Run plugin

🐙 :octopus:
➕ :heavy_plus_sign:
🐈 :cat2:
⩵
❤️ :heart:

Content

• Introduction
• GEmojiSharp
• GEmojiSharp.AspNetCore
  • TagHelpers
  • HtmlHelpers
• GEmojiSharp.Blazor
• GEmojiSharp.DotnetTool
  • Installation
  • Usage
• GEmojiSharp.PowerToysRun
  • Installation
  • Usage
  • Configuration
• Samples
• Attribution

Introduction

Using emojis on GitHub is accomplish with emoji aliases enclosed by colons:

:+1: This PR looks great - it's ready to merge! :shipit:

👍 This PR looks great - it's ready to merge!

GEmojiSharp make this possible in C#. The library contains a static array of all valid emoji in GitHub Flavored Markdown. That is the intersection of the emoji.json database and the API with available emojis.

A visual referense of all GitHub Emoji:

• https://github.com/hlaueriksson/github-emoji

GEmojiSharp

GitHub Emoji for C# and .NET 📦

Static methods:

Emoji.Get(":tada:").Raw; // 🎉
Emoji.Get("🎉").Alias(); // :tada:
Emoji.Raw(":tada:"); // 🎉
Emoji.Alias("🎉"); // :tada:
Emoji.Emojify(":tada: initial commit"); // 🎉 initial commit
Emoji.Demojify("🎉 initial commit"); // :tada: initial commit
Emoji.Find("party popper").First().Raw; // 🎉
Emoji.Get("✌️").RawSkinToneVariants(); // ✌🏻, ✌🏼, ✌🏽, ✌🏾, ✌🏿

Extension methods:

":tada:".GetEmoji().Raw; // 🎉
"🎉".GetEmoji().Alias(); // :tada:
":tada:".RawEmoji(); // 🎉
"🎉".EmojiAlias(); // :tada:
":tada: initial commit".Emojify(); // 🎉 initial commit
"🎉 initial commit".Demojify(); // :tada: initial commit
"party popper".FindEmojis().First().Raw; // 🎉

Regular expression pattern to match all emojis:

var text = "Lorem 😂😂 ipsum";

var matches = Regex.Matches(text, Emoji.RegexPattern);
string.Join(string.Empty, matches.Select(x => x.Value)); // 😂😂

Regex.Replace(text, Emoji.RegexPattern, string.Empty); // Lorem  ipsum

GEmojiSharp.AspNetCore

GitHub Emoji for ASP.NET Core 📦

The package includes:

• TagHelpers
• HtmlHelpers

TagHelpers

Update the _ViewImports.cshtml file, to enable tag helpers in all Razor views:

@addTagHelper *, GEmojiSharp.AspNetCore

Use the <emoji> tag or emoji attribute to render emojis:

<span emoji=":tada:"></span>
<emoji>:tada: initial commit</emoji>

Standard emoji characters are rendered like this:

<g-emoji class="g-emoji" alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png">🎉</g-emoji>

Custom GitHub emojis are rendered as images:

<img class="emoji" title=":octocat:" alt=":octocat:" src="https://github.githubassets.com/images/icons/emoji/octocat.png" height="20" width="20" align="absmiddle">

Use CSS to properly position the custom GitHub emojis images:

.emoji {
    background-color: transparent;
    max-width: none;
    vertical-align: text-top;
}

Use the JavaScript from g-emoji-element to support old browsers.

Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.

Add a libman.json file:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "unpkg",
      "library": "@github/g-emoji-element@1.2.0",
      "destination": "wwwroot/lib/g-emoji-element/"
    }
  ]
}

And add the script to the _Layout.cshtml file:

<script src="~/lib/g-emoji-element/dist/index.js"></script>

Do you want to use emoji anywhere, on any tag, in the body? Then you can use the BodyTagHelperComponent.

Use any tag to render emojis:

<h1>Hello, :earth_africa:</h1>

Registration via services container:

using GEmojiSharp.AspNetCore;
using Microsoft.AspNetCore.Razor.TagHelpers;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddTransient<ITagHelperComponent, BodyTagHelperComponent>();

Registration via Razor file:

@page
@model GEmojiSharp.Sample.Web.Pages.ComponentModel
@using Microsoft.AspNetCore.Mvc.Razor.TagHelpers
@using GEmojiSharp.AspNetCore
@inject ITagHelperComponentManager manager;
@{
    ViewData["Title"] = "Component";
    manager.Components.Add(new BodyTagHelperComponent());
}

Registration via Page Model or controller:

using GEmojiSharp.AspNetCore;
using Microsoft.AspNetCore.Mvc.Razor.TagHelpers;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace GEmojiSharp.Sample.Web.Pages
{
    public class ComponentModel : PageModel
    {
        private readonly ITagHelperComponentManager _tagHelperComponentManager;

        public IndexModel(ITagHelperComponentManager tagHelperComponentManager)
        {
            _tagHelperComponentManager = tagHelperComponentManager;
        }

        public void OnGet()
        {
            _tagHelperComponentManager.Components.Add(new BodyTagHelperComponent());
        }
    }
}

HtmlHelpers

Update the _ViewImports.cshtml file, to enable HTML helpers in all Razor views:

@using GEmojiSharp.AspNetCore

Use the Emoji extension methods to render emojis:

@Html.Emoji(":tada: initial commit")
@Html.Emoji(x => x.Text)

GEmojiSharp.Blazor

GitHub Emoji for Blazor 📦

The package is a Razor class library (RCL) with a Razor component.

Update the _Imports.razor file, to enable the component in all Razor views:

@using GEmojiSharp.Blazor

Note

In a Blazor Web App (.NET 8 or later), the component requires an interactive render mode applied either globally to the app or to the component definition.

Set the global render mode in App.razor:

<Routes @rendermode="InteractiveServer" />

or per page/component:

@rendermode InteractiveServer

Use the <Emoji> component to render emojis:

<Emoji>:tada: initial commit</Emoji>

Standard emoji characters are rendered like this:

<g-emoji class="g-emoji" alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png">🎉</g-emoji>

Custom GitHub emojis are rendered as images:

<img class="emoji" title=":octocat:" alt=":octocat:" src="https://github.githubassets.com/images/icons/emoji/octocat.png" height="20" width="20" align="absmiddle">

GEmojiSharp.DotnetTool

GitHub Emoji dotnet tool 🧰

Installation

Install:

dotnet tool install -g GEmojiSharp.DotnetTool

Update:

dotnet tool update -g GEmojiSharp.DotnetTool

Uninstall:

dotnet tool uninstall -g GEmojiSharp.DotnetTool

Enable emoji in the terminal:

• Open Settings / Time & Language / Language / Administrative Language Settings / Change system locale...
• Check "Beta: Use Unicode UTF-8 for worldwide language support" and click OK
• Reboot the PC for the change to take effect

• Set a process code page to UTF-8

Usage

emoji --help

Description:
  GitHub Emoji dotnet tool

Usage:
  emoji [command] [options]

Options:
  --version       Show version information
  -?, -h, --help  Show help and usage information

Commands:
  r, raw <args>       Get raw emojis
  a, alias <args>     Get emoji aliases
  e, emojify <args>   Replace aliases in text with raw emojis
  d, demojify <args>  Replace raw emojis in text with aliases
  export <args>       Export emoji data to <json|toml|xml|yaml>

Raw

emoji raw --help

Description:
  Get raw emojis

Usage:
  emoji raw [<args>...] [options]

Arguments:
  <args>  Find emojis via description, category, alias or tag

Options:
  -st, --skin-tones  Include skin tone variants
  -c, --copy         Copy to clipboard
  -?, -h, --help     Show help and usage information

Examples 💁

Get raw emojis:

emoji raw "grinning cat"
emoji raw grinning cat
emoji r grinning cat

😺
😸

Copy to clipboard:

emoji raw "grinning cat" --copy
emoji r grinning cat -c

😺😸

Skin tone variants:

emoji raw "victory" --skin-tones
emoji r victory -st

✌️
✌🏻
✌🏼
✌🏽
✌🏾
✌🏿

Alias

emoji alias --help

Description:
  Get emoji aliases

Usage:
  emoji alias [<args>...] [options]

Arguments:
  <args>  Find emojis via description, category, alias or tag

Options:
  -c, --copy      Copy to clipboard
  -?, -h, --help  Show help and usage information

Examples 💁

Get emoji aliases:

emoji alias "grinning cat"
emoji alias grinning cat
emoji a grinning cat

:smiley_cat:
:smile_cat:

Copy to clipboard:

emoji alias "grinning cat" --copy
emoji a grinning cat -c

:smiley_cat::smile_cat:

Emojify

emoji emojify --help

Description:
  Replace aliases in text with raw emojis

Usage:
  emoji emojify [<args>...] [options]

Arguments:
  <args>  A text with emoji aliases

Options:
  -c, --copy      Copy to clipboard
  -?, -h, --help  Show help and usage information

Examples 💁

Replace aliases in text with raw emojis:

emoji emojify ":tada: initial commit"
emoji emojify :tada: initial commit
emoji e :tada: initial commit

🎉 initial commit

Copy to clipboard:

emoji emojify ":tada: initial commit" --copy
emoji e :tada: initial commit -c

Demojify

emoji demojify --help

Description:
  Replace raw emojis in text with aliases

Usage:
  emoji demojify [<args>...] [options]

Arguments:
  <args>  A text with raw emojis

Options:
  -c, --copy      Copy to clipboard
  -?, -h, --help  Show help and usage information

Examples 💁

Replace raw emojis in text with aliases:

emoji demojify "🎉 initial commit"
emoji demojify 🎉 initial commit
emoji d 🎉 initial commit

:tada: initial commit

Copy to clipboard:

emoji demojify "🎉 initial commit" --copy
emoji d 🎉 initial commit -c

Export

emoji export --help

Description:
  Export emoji data to <json|toml|xml|yaml>

Usage:
  emoji export [<args>...] [options]

Arguments:
  <args>  Find emojis via description, category, alias or tag

Options:
  -f, --format <format>  Format the data as <json|toml|xml|yaml>
  -c, --copy             Copy to clipboard
  -?, -h, --help         Show help and usage information

Formats:

• json
• toml
• xml
• yaml

Examples 💁

Export emoji data to json:

emoji export "grinning cat" --format json
emoji export grinning cat --format json
emoji export grinning cat -f json
emoji export grinning cat

[
  {
    "Raw": "😺",
    "Description": "grinning cat",
    "Category": "Smileys & Emotion",
    "Aliases": [
      "smiley_cat"
    ],
    "Tags": null,
    "UnicodeVersion": "6.0",
    "IosVersion": "6.0",
    "Filename": "1f63a",
    "IsCustom": false
  },
  {
    "Raw": "😸",
    "Description": "grinning cat with smiling eyes",
    "Category": "Smileys & Emotion",
    "Aliases": [
      "smile_cat"
    ],
    "Tags": null,
    "UnicodeVersion": "6.0",
    "IosVersion": "6.0",
    "Filename": "1f638",
    "IsCustom": false
  }
]

Copy to clipboard:

emoji export "grinning cat" --format json --copy
emoji export "grinning cat" -c

GEmojiSharp.PowerToysRun

GitHub Emoji PowerToys Run plugin 🗂️🔎🔌

Installation

The plugin is developed and tested with PowerToys v0.83.0.

Install:

0. Install PowerToys
1. Exit PowerToys
2. Download the .zip file from the latest release and extract it to:
   • %LocalAppData%\Microsoft\PowerToys\PowerToys Run\Plugins
3. Start PowerToys

Usage

1. Open PowerToys Run with alt + space
2. Type emoji
   • A list of all emojis will be displayed
3. Continue to type to find emojis via description, category, alias or tag
4. Use ⬆️ and ⬇️ keys to select an emoji
5. Press Enter to copy the selected raw emoji to clipboard
6. Press ctrl + c to copy the selected emoji aliases to clipboard
7. Press ctrl + Enter to copy the selected raw emoji skin tone variants to clipboard
   • For emoji that supports skin tone modifiers

Emojify:

• You can paste a text containing emoji aliases to replace them with raw emojis

Demojify:

• You can paste a text containing raw emojis to replace them with aliases

Configuration

Change action keyword:

1. Open PowerToys
2. Select PowerToys Run
3. Scroll down to Plugins
4. Expand GEmojiSharp
5. Change Direct activation command

Samples

The samples folder contains...

• GEmojiSharp.Sample.BlazorWeb, a Blazor Web App (InteractiveServer render mode)
• GEmojiSharp.Sample.BlazorWebAssembly, a Blazor WebAssembly App
• GEmojiSharp.Sample.Web, a ASP.NET Core Web App (Razor Pages)

The Blazor WebAssembly app is showcased here:

• https://hlaueriksson.github.io/GEmojiSharp/ (GitHub Pages)
• https://purple-mushroom-05c6bad10.azurestaticapps.net (Azure Static Web Apps)

Attribution

Repositories consulted when building this:

• https://github.com/github/gemoji
• https://github.com/github/g-emoji-element
• https://github.com/dotnet/command-line-api
• https://github.com/microsoft/PowerToys