/ JEKYLL

Jekyll 기반의 GitHub Page 생성(4)

Jekyll 기반의 GitHub Page 생성은 여러 절로 구성되어 있습니다.


rouge를 이용한 syntax highlighting

rouge는 pure-ruby syntax highlighter입니다. 이를 이용하면 블로그에 코드를 붙여넣을 때 간단하게 syntax highlighting 기능을 이용할 수 있습니다. Jekyll은 syntax highlighting을 위해 Pygments도 지원했었는데 Jekyll 3(2016년 02월)부터 Pygments를 지원하지 않습니다.

_config.yml 설정 파일에 다음과 같이 설정한 부분이 있습니다.

# Jekyll configuration
markdown: kramdown
# kramdown : markdown의 개조판.
# markdown에서 불편한 사항을 개선한 형태.

highlighter: rouge
# text highlighter로 rouge이용
# 2016.02월 이후로 syntax highlighter는 rouge만 지원.
# Pygments 사용불가.
...
...

_config.yml에 설정은 잡아놨는데 실제 설치는 아직 안했습니다. gem을 이용하여 rouge를 설치합니다.

command 창을 열어서 다음과 같이 입력합니다.

gem install rouge

rouge 설치

rouge는 특정 style을 가진 css파일을 생성하기 위한 command-line tool을 가지고 있습니다. rougify명령을 이용하면 우리가 원하는 스타일의 css 파일을 생성할 수 있습니다.

일단 다음의 명령어로 어떤 스타일을 사용할 수 있는지 확인합니다.

rougify help style

rouge 설치

아래 부분에 available themes가 보이는 군요. 여기에서 맘에 드는거 하나를 선택해서 style.css를 생성할 수 있습니다. 제가 사용하고 있는 theme는 monokai.sublime 입니다.

이제 다음과 같은 명령어로 원하는 theme로 css 파일을 생성합니다.

rougify style monokai.sublime > assets/css/syntax.css

자 이제 D:/blogmaker/assets/css/syntax.css 파일이 생성되었습니다. 이 css파일에 대한 링크를 post에서 사용할 수 있도록 _layouts/default.html에 추가해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <!-- Document Settings -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- Base Meta -->
    ...
    ...   

    <!-- 웹 폰트 설정 -->
    <link rel="stylesheet" 
          href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">

    <!-- syntax.css -->
    <link rel="stylesheet" href="/assets/built/syntax.css">

새로운 css 파일이 생성되었으니 gulp를 이용해 css task를 실행시켜야 합니다. 그래야 minified된 css파일이 생성이 되서 블로그에서 이용할 수 있을 테니까요.

이제 준비가 끝났습니다. 포스트에서 글 작성할 때 다음과 같은 code block을 이용하게 됩니다. code block에 대해 사용하는 언어를 명시해 주면 그에 맞춰 문법 강조를 하게 됩니다.

 
~~~javascript
function syntaxHighlight(code) {
   var foo = 'Hello World';
   var bar = 100;
}
~~~

위의 코드에 대한 결과입니다.

function syntaxHighlight(code) {
   var foo = 'Hello World';
   var bar = 100;
}

End.