利用MarkDown收集常用的Emoji

2022/3/12 markdown

  1. 总结常用的emoji
  2. 讲述如何利用 markdown 收集常用的Emoji,并形成网格布局

# 背景

Emoji是一种文本类型的象形符号, 它和图片、表情包不同,它能够在任何文本输入的地方使用,因为它本身就是一种文字 ;最新的emoji 13.0版本包含1814个独立的表情符号(该统计不包含由多符号组成和其他肤色的表情符号),emoji能够在各个不同的操作平台上显示,但显示效果会有一些不同。

看到过许多的 MarkDown 文件里都引用格式各样的emoji,也看到过许多的github网站的仓库简介也都使用emoji,如下:

image-20220312102910928

这样的emoji,要么是 Unicode 格式,要么需要直接复制粘贴去使用。

对于我来说,更多使用的场景是用来 书写MarkDown。

所以我就在思考:怎么使用 MarkDown 来收集常用的 emoji,并且按照 类似于表格那样排列,然后便于复制粘贴使用?

需求:

  • 使用 MarkDown 收集常用的 emoji

  • 收集的 emoji 采用表格/网格布局

  • 在 MarkDown 文件中,可以随意使用复制的 emoji

# emoji合集

# 我常用emoji

我的常用Emoji (opens new window)

# 如何收集常用的emoji?

Emoji中文网 (opens new window) 中可以找到各个类型的emoji,重点在于展示的方式。

# 方式一:使用表格(不推荐)

使用表格的话,我们可以直接使用 MarkDown 的语法来做:

|      |      |      |
| ---- | ---- | ---- |
|      |      |      |
|      |      |      |
|      |      |      |
1
2
3
4
5

但是这样的语法,不能修改 表格内容 在网页中的样式,即默认的图标太小,观感体验很不友好。

当然也可以使用 HTML 方式写表格的语法,这样就可以修改表格内容的样式, MarkDown 也天然支持这样的渲染方式。

<table border="1px" align="center" bordercolor="black" width="80%" height="100px">
    <tr align="center">
        <td>🤪</td>
        <td>😀</td>
        <td>😂</td>
    </tr>
    <tr align="center">
        <td>😳</td>
        <td>😠<br></td>
        <td>😱</td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12

这样的方式虽然可以实现上班的需求,再配合CSS修改样式。

但是最大的缺点就是,每次不仅要复制 <td>😱</td> 还是要复制<tr></tr>这样的代码会把行和列定死,需要再次想修改行列数时,非常麻烦

# 方式二:使用表格布局(推荐)

话不多说,先亮代码:

<div style="display:grid;grid-template-columns: repeat(auto-fill, 12.5%);font-size:30px;justify-items:center;align-items:center;line-height:normal;text-align:center">
    <span>🤪<br>滑稽</span>
    <span>😀<br>微笑</span>
    <span>😂<br>笑哭</span>
    <span>😳<br>脸红</span>
    <span>😵‍💫<br></span>
    <span>😎<br>墨镜</span>
    <span>😲<br>震惊</span>
    <span>🙄<br>翻白眼</span>
    <span>😏<br>得意</span>
    <span>😱<br>吓死了</span>
    <span>😠<br>生气</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

HTML内部代码自动适应行列,关键代码:

grid-template-columns: repeat(auto-fill, 10%);
1

10% 即将内容分为10列。

如果想要5列,那么修改成20%即可。

效果图:

image-20220312110005626

但还是有缺点,如果10列放不下会出现拥挤情况,尤其在手机端显示不友好。

# 方式三:flex布局(极其推荐)

<div style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;text-align: center;font-size: 30px;line-height:normal;">
    <span style="flex-basis: 10%;">🤪<br>滑稽</span>
    <span style="flex-basis: 10%;">😀<br>微笑</span>
    <span style="flex-basis: 10%;">😂<br>笑哭</span>
    <span style="flex-basis: 10%;">😳<br>脸红</span>
    <span style="flex-basis: 10%;">😵‍💫<br></span>
    <span style="flex-basis: 10%;">😎<br>墨镜</span>
    <span style="flex-basis: 10%;">😲<br>震惊</span>
    <span style="flex-basis: 10%;">🙄<br>翻白眼</span>
    <span style="flex-basis: 10%;">😏<br>得意</span>
    <span style="flex-basis: 10%;">😱<br>吓死了</span>
    <span style="flex-basis: 10%;">😠<br>生气</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 参看: