/ JEKYLL

Jekyll 기반의 GitHub Page 생성(4)

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


영상설명

IT 블로그는 블로그 내용에 코드를 포함하고 있는 경우가 상당히 많습니다. 이런 코드의 가독성을 높이기 위해 syntax highlighting 기능을 많이 이용합니다.

이번 영상은 블로그 내용에 포함된 코드의 가독성을 높이기 위해 syntax highlighting 기능을 설정하는 방법에 대한 내용입니다.

Jekyll 기반의 GitHub Page 생성(4) - syntax highlighting 설정 영상


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

자 이제 C:/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.