[Jekyll] Jekyll에서 emoji 사용하기

 최근 github pages를 이용해 블로그를 만드는 게 멋져 보여 테마 하나를 다운로드하여 부족한 기능들을 채우고 있는 중이다.

 

포스팅을 md 파일로 올려야 한다는 게 조금 귀찮고 익숙하지 않지만 원하는 기능을 하나하나 추가할 수 있다는 게 티스토리 블로그보다 훨씬 좋은 것 같다. 물론 jekyll을 이용한 블로그에 포스팅은 하나도 올리지 않았다.

 

지금까지 다운로드한 테마에 글 목차 기능도 없고 카테고리 기능도 없어 해당 기능들을 넣어 주었는데 직접 하나하나 커스텀하다 보니 티스토리보다 마음에 드는 것 같다. 다시 한번 말하지만 아직 블로그에 포스팅은 하나도 올리지 않았다.

또 한 가지 장점을 말하자면 블로그에 글을 올리는 것만으로도 github의 풀밭을 초록색으로 채울 수 있다.

 

아무튼 notion을 봐도 그렇고 velog 글을 봐도 그렇고 요즘 대세는 포스팅에 emoji를 넣어야 조금 더 있어 보이고 그럴싸한 개발자가 된 느낌을 주는 것 같아 jekyll에서 emoji를 사용하는 방법을 알아보았다.

 

우선 jekyll에서 emoji를 사용하기 위해서는 플러그인을 깔아 주어야 한다.

 

---

github.com/jekyll/jemoji

jekyll/jemoji

---

 

플러그인을 사용하기 위해 Gemfile에 jemoji를 추가한다.

 

gem "jemoji"

 

그런 다음 jekyll의 최상위 루트에서 bundle install 명령어를 실행해 준다.

 

bundle install

 

_config.yml 파일의 plugins에도 jemoji를 추가한다. 만약 사용 중인 jekyll의 버전이 3.5.0 이하일 경우 plugins가 아닌 gems 밑에 적어주어야 한다.

 

plugins:
  ...
  - jemoji

 

 

이제 

 

---

gist.github.com/rxaviers/7360908

Complete list of github markdown emoji markup

---

 

위 링크에 있는 이모지 목록에서 원하는 이모지를 찾아 사용하면 jekyll에서 이모지를 사용할 수 있다.

 

?????

 

뭔데...

 

사용하는 테마에 따라서 이모지가 이상하게 나올 수 있다.

emoji는 class명이 emoji인 img 태그로 작성되기 때문에 css에서 사이즈만 조절해 주면 된다.

 

.emoji {
  width: 1em !important;
  height: 1em !important;
  vertical-align: text-bottom;
}

 

나는 다음과 같이 수정해 주었다.

 

 

이제 Jekyll 블로그에서 emoji를 사용할 수 있게 되었다.

 

근데 생각해보니 그냥 windows키 + .을 눌렀을 때 나오는 emoji를 사용해도 되는 것 같다... 🙄