[GitHub Pages] Jekyll 코드하이라이터 (코드블럭) 테마 변경

Rouge는 Ruby에서 제공하는 gem 으로 코드의 시작과 끝에 ```을 추가하면 코드 하이라이트가 가능하다.
gem은 Ruby에서 제공하는 라이브러리를 편리하게 설치할 수 있도록 지원되는 도구이다. Jekyll도 gem의 한 유형이다.
이 글은 rouge를 이용하여 코드 하이라이트 테마를 적용하는 방법에 대한 글이다.

1. 코드하이라이터 테마 설치

gem install rouge

Note: minimal-mistakes 테마를 사용하여 codeblock은 설치되어 있지만, 다른 테마로 변경하는 방법에 대한 글이다.

2. Rouge 테마 사이트에서 원하는 테마를 선택한다.

• 테마 선택하기
  
  [gruvbox.dark 테마적용 예]

3. _config.yml 파일에 아래 내용 추가

# Conversion
markdown: kramdown
highlighter: rouge

# Markdown Processing
kramdown:
  input: GFM

Note: highlighter가 이미 추가된 경우도 있으니 기존 내용을 확인 후 추가한다.

4. 원하는 테마가 적용된 syntax.css 파일 생성

홈디렉토리에서 아래의 명령어를 실행하면 syntax 파일이 생성된다.

rougify style gruvbox.dark > assets/css/syntax_gruvbox.dark.css

5. 생성된 css 파일을 layout파일이나 scss 파일에 추가

/* @import "minimal-mistakes/syntax"; */           // 기존 syntax 파일을 주석처리한다.
@import "minimal-mistakes/syntax_gruvbox.dark";   // 신규 syntax 파일을 추가한다.

Note: minimal-mistakes는 css 파일을 minimal-mistakes.scss에서 통합 관리하여 이 파일에 위의 내용을 추가하였다.