Github 是全球最大的“同性”交友网站( ̄ε(# ̄)☆╰╮( ̄▽ ̄///),不对不对,是最大的代码分享网站。就gayhub来说( ̄ε(# ̄)☆╰╮( ̄▽ ̄///),就网页版的github来说,有很多丰富的功能(快捷键啦、命令行跳转啦)。这里介绍一下github的emoji功能。

效果

github上的emoji可以用在几乎所有可以显示文字的地方。比如简介、README、提交说明、项目Wiki页等。具体能用在哪里大家可以自己尝试一下。

提交说明上的emoji

使用

使用emoji很简单。由于不能插入图片,所以需要通过一些特殊符号来插入。
比如:blush:就会变成

在提交信息的时候可以

1
git commit –m 'commit some changes :blush:'

具体emoji和对应名可以参考http://www.emoji-cheat-sheet.com/

支持的网站

不仅仅是Github,还有一些地方支持这种emoji格式。

A one pager listing the different emoji emoticons supported on Campfire, GitHub, Basecamp Next, Teambox,Plug.dj, Flowdock, Sprint.ly, GitLab, Kandan, andbang, Trello, Hall, Qiita, Trello, Zendesk, Ruby-China, Grove,Idobata, NodeBB Forums, Slack, Streamup, Quip, OrganisedMinds, and Hackpad.

twemoji

今天在闲逛的时候偶然发现了Twemoji,这是Twitter开源的完整的Emoji表情图片。开发者可以去Github上下载完整的表情库,并将其用到自己感觉高大上的地方。
效果展示
首先引入js库

1
<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>

然后调用twemoji.parse( ... )函数来解析emoji。

1
2
3
4
5
6
7
8
9
10
twemoji.parse('I \u2764\uFE0F emoji!');
// will produce
/*
I <img
class="emoji"
draggable="false"
alt="❤️"
src="https://twemoji.maxcdn.com/36x36/2764.png"> emoji!
*/

不仅可以来解析string也可以来解析DOM。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var div = document.createElement('div');
div.textContent = 'I \u2764\uFE0F emoji!';
document.body.appendChild(div);
twemoji.parse(document.body);
var img = div.querySelector('img');
// note the div is preserved
img.parentNode === div; // true
img.src; // https://twemoji.maxcdn.com/36x36/2764.png
img.alt; // \u2764\uFE0F
img.className; // emoji
img.draggable; // false

具体怎么使用可以参考github上面的介绍。

参考文献