Org-mode로 블로그 쓰기

* 제목2
** 제목3
*** 제목4

원래 Org-mode에서 레벨 1 제목은 * 제목1 과 같이 표시하는데, Hugo에서 보면 h2 로 렌더링이 되어 있다. 이건 블로그 글 제목을 이미 h1 으로 렌더링했기 때문에 글 안에 레벨 1 제목을 h2 로 매핑한 것이다. 어찌 생각하면 당연한 것으로 볼 수 있다.

Org-mode에서는 볼드, 이탤릭, 밑줄, 취소선을 각각 *bold*, /italic/, _underline_, +strike+ 로 나타낸다. 인라인 코드는 =code= 와 같이 쓸 수 있다. 볼드, 이탤릭, 밑줄, 취소선, Inline 표현에 문제는 없는 것 같다.

그러나 각 스타일의 텍스트에 조사를 붙이면 스타일이 깨지는 문제가 있다. 즉, *bold*를 과 같은 식으로 표시하면 blod 가 볼드체로 표시되지 않는다. 지금 이 글에서도 스타일된 텍스트와 조사 사이에 공백이 있는 것을 볼 수 있다.

영어에서는 이런 문제가 없지만, 한국어에서는 문제가 생긴다. 다른 스타일은 거의 사용하지 않지만, 인라인 코드는 자주 사용하는 데, 그 때마다 공백을 넣어 앞 단어와 조사를 띄어야 한다면 번거로울 뿐 아니라 한국어 표기법에 맞지 않는 문제가 생긴다.

목록을 편집하는 것은 Org-mode가 훨씬 편하다. 항목 이동, 항목의 레벨 이동, 목록 형식 변경 등의 작업을 매우 간단히 처리할 수 있다. 예전에는 목록 아이템 간 간격이 너무 벌어지는 문제가 있었다. <li> 요소마다 <br> 이 들어갔 던 것 같다.

이제는 그런 문제가 없는 듯 하다. 마크다운에서 만든 문서와 렌더링 결과에서 눈에 보이는 차이는 없다.

마크다운에서는 링크를 [링크텍스트](URL) 형식으로 표현하고, Org-mode에서는 [[URL][링크텍스트]] 형식으로 표현한다. 어느 형식이 낫다고 하긴 어렵지만, 나는 Org-mode 형식을 더 좋아한다. 문서에 링크를 넣을 때 항상 URL부터 붙여넣은 다음 링크 텍스트를 편집하는 습관이 있기 때문이다.

[[image-path]] 형식으로 이미지를 삽입할 수 있다. 또는 다음과 같이 이미지에 속성을 추가할 수 있다.

#+ATTR_HTML: :width 100% :height 100% :class img-cls :alt image description
[[/image/image.png]]

About 페이지에 있는 이미지 중 하나를 업어와 표시해본다. style 에 border-radius 속성을 추가했다. 이런 건 img 태그를 직접 사용하지 않는 한 마크다운 만으로는 불가능한 일이다.

Emacs에서는 markdown-mode나 Org-mode나 모두 쉽고 편리하게 테이블을 편집할 수 있다. 그러나 HTML 렌더링에 대한 컨트롤은 마크다운을 사용하는 편이 나은 것 같다.

마크다운에서는 다음과 같이 테이블 헤더와 바디를 구분하는 선에 : 을 추가해 컬럼의 정렬 방법을 조정할 수 있다.

| tag  | c1  |   c2 |
|------|:---:|-----:|
| tag1 | 100 | 1000 |
| tag2 | 20  |   10 |

따라서 위 테이블의 c1 컬럼은 가운데 정렬되고 c2 컬럼은 오른쪽 정렬된다.

• |----|: 디폴트. 왼쪽 정렬 |:---| 도 마찬가지.
• |:--:|: 가운데 정렬
• |---:|: 오른쪽 정렬

Org-mode에서는 컬럼 정렬 방식을 조정하는 방법을 찾지 못했다.

Org-mode에서 코드 블록은 #+BEGIN_SRC {lang}, #+END_SRC 를 쓰면 된다.

#+BEGIN_SRC rust
fn main() {
    println!("Hello world!");
}
#+END_SRC

위와 같이 하면 다음과 같이 표시된다.

fn main() {
    println!("Hello world!");
}

수식을 작성할 때는 #+BEGIN_LATEX, #+END_LATEX 로 감싸주면 된다.

#+BEGIN_LATEX
\begin{aligned}
R_{\mu\nu} = \frac{1}{2}Rg_{\mu\nu} - \frac{8\pi G}{c^4}T_{\mu\nu}
\end{aligned}
#+END_LATEX

그러면 다음과 같이 수식이 표시된다.

#+BEGIN_LATEX, #+END_LATEX 없이 바로 수식을 써도 되는 것 같다. 인라인 수식은 마크다운을 쓸 때와 마찬가지로 $ 로 감싸주면 된다. 즉, $\sqrt{\pi}$ 는 로 제대로 렌더링된다.

마크다운 문서에서는 임의의 HTML을 삽입할 수 있다. 마크다운에 포함된 HTML은 나중에 마크다운을 HTML로 변환한 문서에 그대로 포함된다.

Org-mode에서는 #+HTML: 을 사용해 HTML을 넣을 수 있다.

#+HTML: <div style="text-align:center;margin:10px 0">
#+HTML: <button type="button" onclick="alert('Button clicked!')">Click</button>
#+HTML: </div>

위와 같이 HTML을 넣으면 다음과 같이 렌더링된다. 버튼을 클릭하면 JavaScript도 실행된다.

문서에 HTML이나 JavaScript를 넣는 것이 가능하기는 하지만, 모든 행 앞에 #+HTML: 을 넣어야 하기 때문에 매우 번거롭다. 마크다운에서는 polymode를 사용해 HTML이나 JavaScript 코드도 정말 코드 편집하듯 작업할 수 있는데, Org-mode에서는 행 앞에 #+HTML: 을 넣는 식이기 때문에 polymode 사용이 어렵다.

Org-mode에서는 태그나 키워드를 모두 공배로 구분하기 때문에 여러 단어로 된 태그나 키워드를 사용하려면 _ 또는 - 로 연결해야 한다.

이 글은 Org-mode로 작성했다. 목록이나 링크를 편집할 때는 markdown-mode보다는 Org-mode가 좋긴 하다. Org-mode에는 분명 장점이 있지만, 다음과 같은 문제로 블로그 글을 쓰는 데 Org-mode를 사용하지 않기로 했다.

• 인라인 코드를 표현할 때 코드 뒤에 바로 조사가 붙이면 인라인 코드로 렌더링이 안 된다.
• 테이블에서 셀 텍스트 정렬을 지정할 수 없다. 테이블을 자주 사용하지는 않지만, 테이블에 숫자가 있는 경우 짜증이 날 것이다.
• HTML이나 JavaScript를 넣기가 매우 번거롭다.

첫 번째 문제가 제일 심각하다. 이 글에서도 = 로 감싼 텍스트에는 조사를 붙일 수 없어 조사를 쓰지 않도록 문장을 수정하거나 어쩔 수 없이 조사를 띄어써야 했다. 이 문제는 Emacs의 Org-mode에서도 똑같이 발생한다. Hugo의 Org-mode 렌더러가 이 문제를 수정할 지는 알 수 없다.

• How to use org mode in Hugo