【技能樹栽種】在 HTML 中插入 Emoji

做個筆記 :memo:

因為自製的Alert 與 Highlighting,沒辦法用 Shortcodes 插入,只好另找解法了。



使用圖片插入

看了一下使用 Shortcodes 所編譯出來的 HTML 程式,發現最終是變成了圖片,像這樣:

1
2
3
4
<img alt=":mask:" 
     class="emoji"
     src="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/mask.png" 
     title=":mask:">


出來的效果長這樣:

:mask:


這種方式出來的圖片較固定,不像其他的方式有可能隨瀏覽器變化。



使用 Unicode

記得 Emoji 本來就是種 Unicode,直接輸入使用應該可以才對~賓果 🎉

1
2
3
4
5
&#x1F637;<span style="font-size:100px">&#x1F637;</span>


出來的效果長這樣:
😷 😷


好處是可以使用 style 調整 Emoji 大小,又不像圖片會失真,但這種方式回隨作業系統與瀏覽器而變化 XDDD


備註一下 Unicode 的插入
查到的 Unicode 應該會長 U+<十六進制數值> 這樣,但在 HTML 中使用要把它轉換成 HTML Encode

HTML Encode 它會用 & 開始 ; 結束,然後使用 #x 表明是十六進制,因此完整 Unicode 使用 HTML Encode 編碼會變成 &#x<十六進制數值>;。當然也可以用十進制來表示,例如:&#x1F637; 十進制就成了 &#128567;,出來的效果都一樣。



Copy and Paste

最後一招大絕招就是複製貼上啦,直接去查表後複製貼上過來就是了 XD



參考資料

  1. 📙 Emojipedia — 😃 Home of Emoji Meanings 💁👌🎍😍。檢自 Emojipedia (2020-02-27)。
  2. Full Emoji List, v13.0 。檢自 Emoji Charts (2020-02-27)。
  3. HTML Smiley Emoji 。檢自 w3schools (2020-02-27)。