Hugo Syntax Highlighting에 라인 넘버 붙이기

단순한 Vim 문제에서 간단한 삽질까지.

개발 이야기를 쓰려면 글 내용에 코드를 싣지 않을 수가 없다. 코드를 밋밋하게 올리면 에디터의 구문강조에 익숙해져 있던 우리는 구문 강조가 적용되어 있지 않은 코드는 뭔가 부족해보인다.

사실 Static Site Genarator를 고를 때 내장 기능들은 살펴보지 않고 그냥 Go로 짜여졌고, 마크다운을 지원한다는 것으로만 Hugo를 선택했던 나는 본격적인 글을 쓸 때부터서야 Hugo의 구문 강조 기능을 살펴보기 시작했다.

Hugo는 Go로 짜여진 구문 강조기인 Chroma를 v0.28부터 Pygments를 대신해 사용한다. Chroma는 Pygments의 옵션을 그대로 쓰기 때문에, 전혀 Chroma를 신경쓰지 않고 Pygments 옵션들을 사용해도 상관없다. 구문 강조 시 다음과 같은 문법을 사용한다.

highlight go “linenos=table,hl_lines=8 15-17,linenostart=199”

이것도 구문 강조를 시키고 싶었지만, 이것마저 구문 강조가 되길래 사진으로 대체했다. 조목조목 뜯어보면 다음과 같다.

highlight go

강조할 텍스트는 Go의 문법을 사용한다.

"linenos=table"

라인 넘버는 테이블 형식으로 표시한다.

내 설명으로는 유추하기 힘들지만, 저 옵션은 라인 넘버의 표시를 테이블로 바꾸는 것이 아니다. ‘표시’하라고 알려주는 것이다. 저 옵션이 명시되어있지 않으면, 라인 넘버를 표시하지 않게 된다.

Vim도 이 문법을 싫어하나 보다.

Vim이 구문강조하는 게 아니라고 생각하니 안에서 마크다운 구문을 무시하지 않는다.

그러나 난 이 문법이 마음에 들지 않았다. 마크다운을 쓰면서 간단하게 위아래로 ```를 사용하는 게 아니라 저런 복잡한 것을 매 코드마다 써줘야한다니? 친절하게도 Hugo 문서에 ``` 문법을 이해시키는 방법이 나와있었다. config.toml에 다음 줄을 추가하면 된다.

pygmentsCodefences = true

잘 받아먹는다.

그러나 이런 방법으로는 라인 넘버를 출력시키지 않는다. 어떻게 하면 ```를 사용하고 라인넘버를 출력시킬 수 있을까?

교차점

첫번째 시도

``` go "linenos=table"
asdfsadf
```

Output: 라인 넘버가 뜨지 않았다.

실패. 그러나 html에서 linenos="table"으로 인식. HTML 단에서 그렇게 되어봤자 라인 넘버는 안나옴으로 어차피 실패.

두번째 시도

``` go linenos=table
asdfsadf
```

Output: 첫번째 시도와 같다.

눈으로는 완벽하게 첫번째 시도와 같은 효과 없음이지만, html 상으로는 다르다.

1
<code class="language-go linenos=table" data-lang="go linenos=table">asdfsadf</code>

따옴표도 없이 옵션을 명시했더니, go와 함께 linenos=table가 lang으로 인식됐다. 이 방법도 아니라면, 문서에 정답이 있지 않을까?

Configure Syntax Highlighter에 정답이 있었다.

1
pygmentsOptions = "linenos=table"

끝.

사실상, 이 포스트의 중요한 것이라고는 이 한줄 밖에 없다.

아래는 내 삽질들.

1
2
[pygmentsOptions]
    linenos = "table"
1
pygmentsOptionsLinenos = "table"
1
linenos = "table"

이런걸로 시간을 버려서 결국 해결한 것에 기뻐해야할지, 빠른 해결책을 생각해내지 못한 것에 대해 슬퍼해야할지…

댓글을 불러올까요?