구문 강조를 위한 펜스 코드 블럭(fenced code block)

요즘 컨퍼런스 준비와 회사에서 신규 프로젝트 런칭으로 연일 야근 중, 오늘은 퇴근하고 저녁 밥도 꾸역 꾸역 먹고 피곤에 쓰러져 버렸다. 근데 이 시간에 깨 버렸네. 잠들기 전에 작성하던 v0.9 에 추가된 펜스 코드 블럭에 대한 소개나 할까 한다.

언젠가부터 웹 페이지에 코드를 표현하고자 할 때 IDE 와 동일하게 구문 강조 라이브러리를 사용하게 되었다. 최근 Github.com 이 주목을 받으며 마크다운(markdown) 포맷 문서화와 펜스 코드 블럭(fenced code block) 이 자주 활용되곤 한다.

하루프레스 0.9.0 버젼에서는 구문 강조를 위한 펜스 코드 블럭을 제공한다. 뿐만 아니라 코드블럭에 원하는 스타일을 적용할 수도 있다.

구문강조 라이브러리

구문 강조는 highlight.js 를 이용했다. highlight.js 는 52 가지 언어를 지원하고 26가지의 유명한 구문 강조 스타일(코드 테마)을 제공한다.

지원언어

구문강조 테마 종류

컬러 테마로 잘 알려진 Solarized, Tomorrow 씨리즈는 기본으로 Github 스타일도 제공한다. 그외 위와 같이 굉장히 다양한 스타일을 제공한다.

좀더 자세한 스타일은 여기를 참고하세요.

적용 방법

특징 하루프레스는 간단한 방법으로 코드블럭 테마를 전역적으로 적용할 수 있을 뿐 아니라 각 페이지마다 별도의 테마를 적용할 수 있다.

먼저 마크다운에서 코드 블럭을 지정하는 방법을 알아보도록 하자.

코드 블럭

마크다운에서 기본 코드 블럭은 1 tab 혹은 4 spaces 이다. 그런데 Github.com 에서는 3개의 backtick ` 을 연달아 작성하는 것으로 구문강조 코드 블럭을 지원하면서 이 Fenced Code Block 가 코드 블럭의 기본 방식처럼 되어가고 있다.

그외에 tilde ~ 3개를 이용해 코드 블럭을 지정하는 방법 중에 하나이다.

```ruby
code block
```

~~~
fenced code block
~~~

~~~javascript
function syntaxHighlight(code, lang) {
   var foo = 'rhio';
   var bar = 33;
}
~~~

예시

javascript

function syntaxHighlight() {
   var haroo = 'press';
   return haroo;
}

ruby

def syntaxHighlight
  @haroo = 'press'
  return @haroo
end

python

def syntaxHighlight():
    haroo = "press"
    return haroo

기본 스타일

기본 스타일은 하루프레스 환경설정 파일에 설정하는 테마로 특별히 지정하지 않는 코드 블럭에는 환경설정에 지정한 스타일로 적용된다.

환경설정 파일은 하루프레스 설치 디렉토리에 config.js 파일에 존재한다. 이 파일을 JSON 포맷으로 이루어져있다.

코드 블럭 스타일을 지정은 config.defaultCodeStyle 이라는 값에 지정할 수 있다. 하루프레스 기본값은 github 으로 설정되어 있고 위의 스타일 목록에서 key 값을 참조하여 지정하면 된다.

페이지별 스타일

하루프레스는 기본 스타일뿐만 아니라 포스팅 별 코드 블럭에 스타일을 지정할 수가 있다. 하루프레스를 이용하고 있는 유저라면 별 어려움이 없게 간단한 옵션 하나로 지정할 수 있다.

포스팅한 마크다운 파일을 열어 메타 정보의 JSON 포맷에 일부 옵션을 설정하면 된다.

• 참고 : 하루프레스의 기본 데이터 규약

{
  …,
  advanced : { }
}

위와 같이 기본적으로 advanced:{} 는 빈 객체가 지정되어 있는데 여기에 codeStyle 키에 값을 지정하면 된다.

{
  …,
  advanced: {
    codeStyle: 'solraized_dark'
  }
}

요약

구문 강조는 개발자 블로깅에 Must Have 아이템이 아닐 수 없다. 50개가 넘는 언어 지원과 30개에 육박하는 다양한 스타일 테마로 블로그 테마에 어울리고 페이지 성격에 걸맞는 스타일을 사용자가 원하는 데로 적용할 수 있다.

하루프레스를 이용하며 발생하는 문제나 좋은 아이디어들은 직접 fork 해 구현해도 좋고 아래 이슈 트래커에 언제든지 남겨주세요.

• 하루프레스 이슈트래커

함께 보세요.

• highlight.js : http://softwaremaniacs.org/soft/highlight/en/
• marked : http://markedapp.com/help/
• Introduction to GFM : http://github.github.com/github-flavored-markdown/, 한글