Hugo 업그레이드
정적 사이트 생성기로 Hugo를 사용하고 있다. 속도도 빠르고 상당히 안정적이다. 버전이 바뀌었다고 사이트가 깨진 일은 한 번도 없었기에, 항상 최신 버전으로 업그레이드 해 사용하고 있다. 며칠 전 v0.60.1로 업그레이드 했는데, 사이트를 생성할 때 다음과 같은 경고 메시지가 보였다.
Building sites … WARN 2019/12/02 hh:mm:ss Markup type mmark is deprecated and will be removed in a future release. See https://gohugo.io//content-management/formats/#list-of-content-formats
에러가 아니고 경고일 뿐이었다. 사이트 생성에도 문제가 생긴 것도 아니었다. 나중에 천천히 살펴봐도 될 일이었다. 그러나 나는 이런 경고 메시지가 보이면 못 참는 성질이다. 당장 고치기로 했다.
마크다운 프로세서
Hugo의 기본 마크다운 프로세서는 Blackfriday였는데, 예전에 뭔가 문제가 있어 MMark를 쓰도록 바꿨다. 아마 수식 렌더링과 관련된 문제를 회피하려고 MMark로 바꿨던 것 같다. 커밋 메시지를 자세히 남겼으면 좋았을 텐데, 내가 남긴 메시지는 Margrate to mmark가 전부다.
그땐 MMark가 좀더 개선된 마크다운 프로세서로 보여 시간을 들여 바꿨던 것 같다. 이젠 MMark가 deprecated 되었다는 경고 메시지가 표시된다. 혹시나 해서 확인했더니 v0.60부터 기본 마크다운 프로세서가 Goldmark로 바뀌었다. Blackfriday 또한 deprecated 될 것이라 한다.
마크다운 프로세서마다 HTML을 조금씩 다르게 생성한다. 마크업 구조가 바뀌면 모든 페이지를 확인하며 CSS를 수정해야 할 수도 있다. 이럴바엔 차라리 Org-mode를 쓰면 어떨까 잠시 고민했다. Hugo는 Org-mode도 기본으로 지원한다. md 파일 대신 org 파일을 작성하면 된다.
Org-mode를 잠시 테스트해보니 또 다른 구조로 HTML이 생성된다. <li> 태그 안에 <p>가 중첩되면서 목록간 줄간격이 벌어진다. 이건 CSS를 수정해 해결할 수 있다. 그러나 한글로 된 태그가 제대로 동작하지 않았다. 이건 심각하다. 그냥 마크다운을 계속 쓰기로 했다.
예전에 파일 확장자를 mmark로 바꿨는데 그걸 다시 md로 바꾸기만 하면 된다.
코드 하이라이팅
파일 확장자를 바꾸니 경고 메시지가 사라졌다. 그런데 페이지를 확인해보니 소스 코드 블록이 조금 이상하게 보였다. 게시물에서 코드 하이라이팅 하는 데는 Highlight.js를 사용했는데, Hugo 새 버전에서는 Hugo가 코드 하이라이팅을 직접 해주며 둘이 충돌한 것 같다.
예전에 페이지 로딩 속도를 개선하려고 highligh.js 서버측 렌더링 작업을 했는데, 이젠 그럴 필요가 없어졌다. 이건 좋은 소식이다. Hugo에 내장된 Chroma 하이라이터가 번개처럼 빠르게 코드를 렌더링 해줄테니 더 이상 느려터진 hljs를 쓸 필요가 없다.
그런데 문제가 생겼다. Chroma 하이라이터가 HTML을 생성할 때 바탕색을 인라인 스타일로 설정해버려 CSS로 바꿀 수가 없었다. 스타일 갤러리에서 마음에 드는 스타일은 대부분 바탕색이 흰 색이었는데, 나는 코드 바탕색을 옅은 회색으로 하고 싶었다.
다행히 해결 방법이 있었다. 설정에서 noClasses 속성을 false로 해주면 인라인 스타일을 쓰는 대신 태그에 클래스를 지정한 마크업을 생성해준다.
[markup.highlight]
...
noClasses = false
스타일 CSS는 다음과 같이 생성할 수 있다. 일단 마음에 드는 xcode 스타일 CSS를 생성했는데, 나중에 다른 스타일로도 쉽게 바꿀 수 있다.
$ hugo gen chromastyles --style=xcode > xcode.css
이렇게 생성한 xcode.css을 편집해 내가 원하는 바탕색을 사용하도록 바꾸고, 이 파일을 사용하도록 테마도 살짝 수정해야 한다.
인라인 HTML
Hugo 서버를 띄워 페이지를 확인하다 다른 문제를 발견했다. 인라인 HTML 블록이 표시되지 않는 것이었다. 마크다운 문서 안에 <pre> 등 인라인 HTML을 종종 사용하는데 이게 통째로 표시가 안 된다. 깜짝 놀라 부랴부랴 문서를 확인했다.
Goldmark 마크다운 프로세스를 사용할 때 인라인 HTML이 사라지는 경우에는 unsafe 모드를 활성화하라는 문서를 찾았다. unsafe 모드라니, 이름이 조금 마음에 들지 않지만 다른 방법이 없으니 일단 활성화 해서 문제를 해결했다.
[markup.goldmark.renderer]
unsafe = true
수식
여러 행으로 표시되어야 하는 수식이 한 줄로 나오는 문제가 눈에 띄었다. 역시 수식에서 아무 문제 없이 그냥 넘어갈리가 없지. 수식에서 행을 바꿀 때 \\를 사용했는데 어떤 이유에서인지 이게 동작하지 않는다. 인터넷을 조금 찾아보니 \newline를 사용해도 되는 것 같다. 모든 수식에서 \\를 \newline으로 바꿨다.
조금 실험을 해보니 Goldmark가 마크다운 문서를 처리하면서 \\를 \로 바꾸는 것 같은 생각이 들었다. Hugo가 생성한 HTML 파일을 확인해보니 역시 예상이 맞았다. \\를 \\\\로 바꿔보니 개행이 제대로 됐다. \\를 \로 축약하면서 \newline의 역슬래시는 건드리지 않는 것이 이해가 되지 않는다.
이제 모든 문제를 해결했다고 생각했지만 다른 문제가 숨어 있었다. 수식에서 \,으로 공백을 주었는데 이게 모두 ,로 표시되는 것이었다. 공백 하나가 쉼표로 보이는 것이라 발견하기도 쉽지 않았다. 이것도 \\ 문제와 궤를 같이 한다. 역시 \\,로 치환하니 공백이 제대로 표시되었다.
내가 보기에 이건 Goldmark의 버그가 아닌가 싶다. MathJax 코드를 이런 식으로 건드리면 안 되는 것 아닌가.
따옴표
큰따옴표와 작은따옴표가 제대로 표시되지 않는 문제를 발견했다. Goldmark가 따옴표를 둥근따옴표로 바꿔주는데, 따옴표 뒤에 조사가 붙어있는 경우는 제대로 처리하지 못해 앞부분은 둥근 따옴표로 뒷부분은 그냥 따옴표로 표시되었다. 예전에도 같은 문제로 둥근 따옴표를 쓰지 않도록 설정했던 것 같다. 타이포그래퍼 확장을 비활성화했다.
[markup.goldmark.extensions]
typographer = false
마무리
경고 메시지 하나 없애려고 했다가 며칠을 날렸다. 눈에 띄는 문제는 모두 수정했지만, 어떤 문제가 더 숨어있는지 알 수 없다. 앞으로는 Hugo에 이런 식의 큰 변화가 없길 바란다.
코드 하이라이터가 Hugo에 내장된 것은 마음에 든다. Goldmark에 Mathjax를 위한 확장이 있는 것 같은데 아직 살펴보지 못했다. 이 확장을 Hugo에서 사용할 수 있다면 글을 올릴 때 셸 스크립트를 실행하는 단계를 없앨 수 있겠다.