jekyll의 템플릿 엔진(liquid)에다가 직접 코딩한 플러그인을 붙일 수 있다.

그래서 태그 플러그인을 만들어 붙여봤다.

highlight 구문을 사용해서 블럭을 치면 블럭을 쳐놓은 부분이 하이라이팅이 되는 것처럼, 내가 만든 어떤 태그 플러그인으로 텍스트에 변화를 주고 싶었다. 오일러 문제 풀이를 참고하기 위해 종종 ntalbs님 블로그에 가는데, 문제를 설명할 때 쓰는 레이아웃이 마음에 들어 비슷하게 만들어 보고 싶었다.

첫 결과물.

문제를 적을 곳~

[eng][kor]

liquid 플러그인을 만들기 전에 신경써야 하는 점이 있는데.. github page 를 통해 블로그를 사용하면서 플러그인도 개발하려면, 블로그 개발 소스와 적용될 소스를 분리해야 한다. 깃헙은 내가 만든 플러그인을 자기 서버에서 실행시키는 것을 막고 있다. 즉 로컬에서 지킬을 내 플러그인과 함께 돌리고, 그 결과물(컴파일 결과물? 지킬이 생성해낸 정적 웹페이지?) 만 깃헙 저장소에 올리는 방식이 되어야 한다. 이 문제를 해결하기 위해 구글링을 해보니, 우아하게 하나의 저장소에서 개발브런치/마스터브런치 로 개발하는 방식을 사용하는 것 같은데, git에 미숙한 나는 따라하다가 저장소를 두 번 지웠다. T_T 당분간은 개발용 저장소와 deploy 저장소 두 개로 관리하기로..

소스 분리 방안을 마련했으면 _plugins 디렉터리 밑에서 루비 플러그인을 만든다.

지킬 플러그인 가이드 문서를 보고 render_time 플러그인을 만들어 본 다음, 필요한 플러그인을 만들었다.

module Hesu
# syntax : 
# { callout_primary_for_euler subject~blah~blah }
# english link
# korean link(optional)
# { endcallout_primary_for_euler }
  class TagCalloutPrimaryForEuler < Liquid::Block
    def initialize( tag_name, markup, tokens)
      super
      @markup = markup
    end

    def render(context)
      @tokens = super.to_s.split( /\n/)
      @default = "<div class=\"bs-callout bs-callout-primary\">\
              <h4>#{@markup}</h4>\
              <a href=\"#{@tokens[1]}\">[영문]</a>"

      if @tokens.length > 2
        return @default + "<a href=\"#{@tokens[2]}\">[한글]</a>" + "</div>"
      else
        return @default + "</div>"
      end
    end
  end

end

Liquid::Template.register_tag('callout_primary_for_euler', Hesu::TagCalloutPrimaryForEuler)

bs-callout은 bootstrap 홈페이지에서 자주 나오는 레이아웃인데, 깔끔해 보여 여기에서 css 설정을 가져왔다.

/* 
 * reference : http://cpratt.co/twitter-bootstrap-callout-css-styles/
 *
 */

.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    border-radius: 3px;
}
.bs-callout+.bs-callout {
    margin-top: -5px;
}
.bs-callout-default {
    border-left-color: #777;
}
.bs-callout-default h4 {
    color: #777;
}
.bs-callout-primary {
    border-left-color: #428bca;
}
.bs-callout-primary h4 {
    color: #428bca;
}
.bs-callout-success {
    border-left-color: #5cb85c;
}
.bs-callout-success h4 {
    color: #5cb85c;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger h4 {
    color: #d9534f;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
    color: #f0ad4e;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info h4 {
    color: #5bc0de;
}

이제 포스팅 글 쓸때 하이라이트 태그 쓰듯이 쓰면 된다.(태그 중괄호 안쪽에 %를 붙여서~)

{ callout_primary_for_euler 문제를 적을 곳~ }

hesu.github.io

hesu.github.io

{ endcallout_primary_for_euler }