README   SanghyukChun's Blog

Octopress Markdown Kramdown으로 이전하기

| Comments

HTML 코드에서 Markdown 코드로

이 블로그를 시작한 이래로, 나는 줄곧 markdown code가 아니라 진짜 pure html code로 블로깅을 해왔다. 별 다른 이유가 있다기보다는, 이 블로그를 맨 처음 시작할 때만 하더라도 markdown에 대한 개념도 많이 없었고, 어느 정도 시간이 흐른 뒤에는 markdown으로 작업하려니 몇 가지 충돌사항들이 발생하는데, 이걸 일일이 처리하기도 귀찮고, 그걸 처리하자고 일부는 markdown으로 쓰고 일부는 html로 작성하려니 정말 끔찍한 코드가 나와서, markdown을 버렸다.

Markdown과 충돌을 일으키는 대표적인 녀석은 바로 MathJax. 알 수 없는 이유로, markdown 안에 MathJax 문법을 쓰면 제대로 동작하지 않았다 (정확히는 escape됐다). 사실 조금만 알아보면 고칠 수 있었는데, 그때는 당췌 원인도 잘 모르겠고, 그냥 힘드니까 버려두었다가, 오늘 갑자기 삘이 꽂혀서 막 고치다가 정신을 차려보니 전체 소스 코드를 뜯어고치고 있더라.

결론적으로 지금은 only markdown 문법만 사용해도 블로깅을 할 수 있도록 소스코드를 뜯어고친 상태이고, 지금 이 글 역시 markdown으로만 작성하고 있다. Markdown을 사용했을 때의 장점이라면,

  1. 편집기 상에서 각각의 포스트들이 훨씬 더 readable하다.
    • 아무래도 html tag가 난잡하게 섞여있으면 편집기로 코드를 읽기가 벅차다. 그럴 일은 없지만, 만약 html syntax highlighting을 못해주는 편집기라도 썼다가는….
    • 사실 이런 이유로, 일일이 html로 코딩할 수 없는 수업, 세미나, 아이디어 정리 등을 포스팅할 때 아래같은 문제가 생긴다.
  2. 포스팅을 할 때에 덜 번거롭다.
    • HTML을 생으로 코딩한다는 얘기는, id, class 같은 attribute라거나, a tag의 내부도 일일이 쳐줘야하고.. 여러모로 귀찮다.
    • HTML로 코딩하는 것 보다는 확실히 생산성이 증가한다. 특히 내가 html 코딩용으로 맞춰둔 sublime text를 쓸 수 없는 환경에서 텍스트로 적은 글을 다시 html로 포팅하는 일은 시간만 엄청 잡아먹고 전혀 생산적이지 않은 일인데 그런 시간을 많이 줄일 수 있을 것 같다.
  3. 전체적인 포스팅 시간이 감소한다.
    • 앞에서 얘기한 덜 번거롭다는 점도 물론 크게 작용한다.
    • 지금 내가 사용 중인 octopress의 경우, rails 기반이라 글을 수정하면 다시 컴파일을 하지 않아도 알아서 글이 rebuild되긴 하지만, 어쨌거나 이것도 시간이 든다.
    • 근데 markdown으로만 코딩을 할 수 있다면 그냥 빠르고 간단한 markdown editor로 글을 쓴 다음 붙여넣기만 하면 된다. 수식이나 그림같은 몇 가지 markdown으로만 지원되지 않는 방식들은 나중에 한 번에 확인하면 되니까 훨씬 시간이 감소한다.

항상 최고일 수는 없듯, markdown을 썼을 때의 단점도 있다.

  1. 명시적으로 코드를 쓰는 것이 아니기 때문에 원하는대로 동작하지 않을 때 디버깅하기가 많이 귀찮다
    • 대표적인 예로 뒤에서 설명할 MathJax 디버깅할때 진짜..
  2. 어쩔 수 없이 html componenet를 하나하나 작업해야할 때가 있는데, 이때 마크다운만 쓰면 어쩔 수 없이 한계가 온다.
    • 지금 image caption을 div tag를 써서 div > img, p로 구성한 상태인데, 이걸 마크다운으로…. 적당히 플러그인으로 코딩하면 어떻게든 할 수 있지 않을까 고민 중이다.

하지만 이래저래 markdown을 썼을 때의 생산성만 못하기 때문에 markdown으로 제대로 쓸 수 있도록 몇 가지 작업을 시작했다. (마치 C가 memory를 명시적으로 다루기에 빠워하지만, 코드 생산성은 파이썬이나 루비를 못따라가는 것과 비슷한 이치)

기존 Markdown 디버그 (MathJax)

기존 markdown기반 코드의 가장 큰 문제는 MathJax가 전혀 동작하지를 않는다는 것이였다. 예를 들어서

1
2

* example 1: $\alpha$.
* example 2: \(\alpha\).

이런 코드를 작성했다고 했을 때, 둘 다 제대로 된 $\alpha$를 보여주는 녀석이 없었다. 뭐, 일단 여러 이유가 있었는데, 먼저 원래대로라면 위에 있는 $ 쓴 녀석은 잘 동작해야한다. 하지만 제대로 동작하지 않았는데, 그건 내가 설정을 좀 잘못했던거고,

문제는 두 번째 녀석이었는데, 이 녀석은 다른게 문제가 아니라 \ 가 escape되어버리는 문제가 있었다. 그러니까 저 코드를 돌리면, example 2: (alpha) 같은 모양이 나와서 속은 터지고 원인은 모르는 상황이 발생. 그래도 이게 markdown이 escape을 해버리는 거라서 html로 explict하게 적어주면 잘 동작했다. 그래서 결국은 저 간단한 코드가 이런 모양새가 되어버렸다

1
2
3
4

<ul>
	<li>example 1: \(\alpha\)</li>
	<li>example 2: \(\alpha\)</li>
</ul>

음.. 딱 봐도 지저분하지 않은가? 문제점을 해결하려고 몇 번 시도하다가, 초반에 MathJax에서 많이 고생했던 터라, 일단 동작하는 상태로 방치해둔게 벌써 거의 2년이 지난 셈이다.

결국, 지금은 MathJax의 설정을 다음과 같이 고쳤다.

1
2
3
4
5
6
7
8
9
10
11

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      jax: ["input/TeX", "output/HTML-CSS"],
      tex2jax: {
        inlineMath: [ ['$', '$'] ],
        displayMath: [ ['$$', '$$'] ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    });
</script>

내가 앞에서 $가 제대로 동작하지 않은 이유는, 이 설정에서 제대로 명시가 되지 않아서 였던 모양이다. 원래 기본옵션으로 되어야 맞는데, 왜인지는 모르겠지만 잘 되지 않았던 모양.

그리고 지금은 \(\)와 \[\]를 아예 패턴에서 빼버린 상황인데, 먼저 \(\)나 \[\]같은 방식으로 수식을 쓰면 가독성이 떨어진다는 점 (처음 쓸 때는 LaTex 초보라 $같은 좋은걸 몰랐다) 그리고 앞에서 말한대로 자꾸 escape해버리는 경우가 발생해서 아예 없애버렸다. 이게 언제 심각해지냐하면, 다음과 같은 방식의 markdown을 쓸 때에 결과 값이 이상해진다

1

다음 링크 [[링크]](http://sanghyukchun.github.io)를 누르면 제 블로그로 갑니다.

내가 이해하기로는 octopress에서 MathJax를 쓰면,

  • markdown (컴파일) → (public에 생성된) html → MathJax로 parsing

이런 현상이 일어나는데, 위와 같은 방식으로 컴파일을 하고나면 경우에 따라 []가 \[\]로 인식이 되어서 ‘링크’가 display math로 떠버리는 황당한 경우가 생기더라. 결국 보기도 편하고 쓰기도 편한 달러로 통일.

Kramdown Markdown

원래 내 Octopress는 RDiscount markdown을 쓰고 있었다. 괜찮은 녀석이긴 한데, 내가 결정적으로 원하는 결정적인 기능인 Heading tag에 자동으로 id 추가기능을 전혀 지원하지 않아서 다른 markdown으로 이전하기로 결정했다. 내가 후보로 살펴본 markdown은 Kramdown과 Redcarpet2이었는데, 이 중 Redcarpet2는 GitHub의 markdown의 베이스가 되는 녀석이라서 1 좀 많이 탐을 냈는데, octopress와는 궁합이 잘 맞지 않아서 포기했다.

Octopress에서 Redcarpet을 쓰는 방법2에 대해 포스팅을 한 사람도 있어서 따라서 해봤는데, 나는 자꾸 atom.xml에서 Liquid Exception이 발생하더라. 내용은 render라는 tag가 없다는건데, 뭔가 redcarpet을 쓰면 내가 octopress에서 남발하고 있는 render가 제대로 동작하지 않는 모양. 결국 포기하고 Kramdown으로 넘어가기로 했다.

Kramdown으로 바꾸기 위해서는 _config.yml에서 markdown부분을 markdown: kramdown으로 수정하기만 하면 된다. 몇 가지 옵션을 줄 수 있는데, 아직 옵션은 안줘봤다.

Table of Contents (ToC)

내가 RDiscount를 버린 가장 큰 이유는 바로 Table of Contents가 없다는 건데, 꼭 필요한건 아니지만, 가끔 ToC가 있었으면 할 때가 있는데도 만들 수가 없어서 좀 번거로울 때가 있었다. 그리고 또 다른 포스트에서 특정 포스트의 Heading을 refer 해야할 때에도 id auto generation이 안되기 때문에 내가 일일이 다시 id tag를 달아줘야하는 끔찍함이 있었는데, 그런 불편함도 사라졌다.

링크를 타고 들어가면 ToC를 만드는 법에 대해 나와있으니 참고하면 좋을 것 같다. 아무튼 지금은 맨 앞에 이렇게만 쓰면 된다. 엄청 편함.

1
2

* TOC
{:toc}

아 물론 css를 좀 고쳐야한다. http://blog.riemann.cc/2013/04/10/table-of-contents-in-octopress/ 를 참고하시길.

Inline Attribute Lists (IAL)

그리고 Kramdown의 또 하나의 장점이라면 markdown의 여러 component들에게 inline으로 attribute를 지정할 수 있다는 것이다.3 이게 무슨 말이냐 하면, 내가 지금 사용 중인 reference list는 다음과 같은 코드로 작성된다.

1
2
3
4

<ol class="reference">
	<li>referenece 1</li>
	<li>referenece 2</li>
</ol>

리스트에 class attribute가 있어서 어쩔 수 없이 html 코드를 직접 써야하는데, Kramdown을 쓰면 다음과 같이 쓸 수 있다.

1
2
3

1. reference 1
2. reference 2
{: .reference}

당연히 #을 쓰면 id도 가능하다!

개인적으로 불편한 점들

일단 \| 이 무조건 table로 사용이 된다. 그래서 MathJax에서 \| A \| 같은걸 쓰려면 \\\| A \\\| 처럼 escape이 된 형태로 써야한다 (심지어 지금도 그렇게 쓰고있다!). 내가 table을 쓰면 상관이 없지만, table을 안쓰는 입장에서 자꾸 이렇게 되니까 답답해 미칠 것 같다. 하다하다 짜증나면 p tag쓰면 된다지만… 그래도 ㅠㅠ.. 그리고 링크도 < >로 묶어줘야지만 auto link가 되는 것도 좀 귀찮다. 근데 이건 장단이 있으니까 익숙해지면 될 것 같다.

그걸 제외하면 아직까지는 엄청 불편한건 없어보인다. 사실 그 동안 markdown으로 글을 안쓰다보니, 갑자기 markdown을 쓰는 것 만으로 글이 엄청 편해져서, 이런 단점들은 아직까지는 그닥 크지 않다.

TODO

오늘 하루 종일 이 작업뿐 아니라 블로그 공사에만 집중 했음에도 불구하고 아직도 할 일이 많다. 오늘 한 대표적인 일 중 하나라면 전체 CSS랑 HTML layout을 살짝 손봤다. 디테일한 부분을 손봤기 때문에 사실 크게 티는 안나지만, 그래도 뭐, 꽤나 만족한다. 이제 남은 녀석들은 예전 html로 작업한 녀석들 중에 필요한 녀석들은 markdown으로 포팅하는 무시무시한 작업을 제외한다면, 그 이외에는 다 루비코드를 직접 건드려야하는 녀석들이다. 대표적으로 남은 놈들이라면..

  • Syntax Highlighting 복구하기
    • 이건 원래 되던 기능인데, 내가 bootstrap붙이면서 충돌이 너무 일어나서 겨우겨우 depreciate시켜놨더니 이제 무슨 수를 써도 highlighting이 안된다 (..)
    • 이건 js로 되는 문제가 아니라 원래 하이라이팅을 해주는 octopress 코드를 충돌이 일어나지 않도록 뜯어고쳐야할듯..
    • 오늘 오전부터 한 2-3시까지 이것만 했는데 도대체 왜 안되는건지 갑갑해서 돌아버리겠다.
  • Image Caption
    • 지금 image caption은 만들어는 놨는데, markdown으로 하기에는 코드가 좀 끔찍하다.
    • <div class="caption"><img src="img"><p>caption</p></div> 이런 식의 코드라서, 뭔가 루비 코드를 직접 건드려야 할 것 같다.
  • Github style heading 링크

조만간 시간있을 때 Syntax 부분이랑 anchor link는 다시 덤벼봐야겠다. Caption은 일이 좀 커질 것 같아서..

아무튼 markdown으로 포스팅하니까 진짜 편하네.

  1. https://github.com/blog/832-rolling-out-the-redcarpet↩

  2. http://yangsu.github.io/blog/2012/10/11/using-octopress-with-github-flavored-markdown-redcarpet/↩

  3. http://kramdown.gettalong.org/syntax.html#inline-attribute-lists↩