깃허브 블로그를 운영하며 불편하였던 점은 Code Highlight를 자동으로 지원하지 않는다는 점이었다.

내가 사용하는 테마에서 지원을 하지 않는지 내가 구성을 잘못 만졌는지 알지못하지만 스스로 해결해보자는 생각이 들었다.

이를 해결하기 위하여 먼저 깃허브 블로그의 구성을 찾아보게 되었다.

깃허브 블로그는 Ruby on Rails라는 웹 프레임워크로 이루어져있다.

RoR

Jekyll은 Ruby를 이용하여 만들어진 툴로 정적인 페이지를 생성 및 관리를 할 수 있다.

이 때, 사용자는 HTML과 CSS에 대한 지식만 간단히 있더라도 쉽게 사용이 가능하다.

Rouge는 Ruby의 패키지(Gem)로 코드의 시작과 끝에 ```을 추가하면 코드 하이라이트가 가능하다.

Windows에 Ruby를 설치하고 환경을 구축 후 rouge를 설치해보니 이미 설치가 되어있다는 메시지가 출력되었다.

이후 페이지를 살펴보니 이미 내가 코드를 입력한 부분에는 highlight라는 클래스가 추가 되어있었다.

image

Rouge는 이미 적용되어 있는 상태이며 해당 코드를 꾸며주는 CSS가 없는 상태였던 것이다.

Rouge에서는 rougify라는 명령어를 이용하여 원하는 테마를 입력하면 CSS 코드를 출력한다.

페이지에 접속하면 원하는 테마를 살펴볼 수 있다.

CSS 적용하기

  1. 원하는 테마(CSS 파일)를 css/theme.css로 저장한다.
  2. _layouts/base.html 파일 상단 common-css에 해당 css 파일을 추가한다. image

적용 후 블로그의 게시물을 살펴보면 정상적으로 잘 작동하는 것을 확인할 수 있었다.

image