Hugo + Mathjax 설정

MathJax, Settings, Hugo
Page content

I. 인라인 수식 에러

한동안 수식 에러를 많나 고생하였다. $$ ... $$ 코드는 잘 적용이 되었다. 그런데, 글 중간에 수식을 넣는 건 잘 되지 않았다. $ ... $ 표현하면 수식문법이 그대로 나와서 글의 가독성이 조금 떨어져 있었다. 통계수식을 넣어주면, 그냥 무언가 전문가스럽다! 전문가도 아니지만 ㅎㅎ

  • $x_{i}$ 내가 표현하고자 하는 것 Vs. x_{i} 실제로 화면에 나오는 것

그리고, 한동안 헤매었다. 길은 알고 있었으나, 역시 적용이 쉽지 않았다. 아래는 해결 방안을 공유한다.

II. 테마에서 사용되는 Latex 문법 확인

Hugo 블로그 사용자분들은 테마를 사용할 것이다. 필자는 mainroad를 사용하는데, Mathjax를 사용하는 것을 확인하였고, config.toml에서 확인하였다.

  • 테마에 관심이 있으신 분들은.. 다음을 참조하시기를 바란다. mainroad 홈페이지
[Params]
  ..
  ..
  mathjax = true # Enable MathJax
  mathjaxPath = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js" # Specify MathJax path
  mathjaxConfig = "TeX-AMS-MML_HTMLorMML" # Specify MathJax config
  ..
  ..

그리고, Mathjax + Hugo + inline math 위주로 검색을 진행하였다.

III. Reference

아래 세 글을 읽고 적용하였더니, 생각보다 쉬웠다.

  1. [solved] MathJax stopped working
  2. Setting MathJax with Hugo
  3. Hugo에서 수학식 쓰기

순차적으로 글을 읽으면서 어느정도 정리가 되었다. 일단 layouts-partials 폴더를 찾아야 한다.

IV. 주의점

  • 여기서 조금 헤매였다. 필자는 layouts-partials 폴더를 직접 만들고, Mathjax 설정을 다시 하려고 시도했다. 그럴 필요가 없다. 왜?
  • 테마를 차용해서 사용 중이기 때문이다. 그래서 config.toml에 사용한다고 지정까지 하지 않았나? 그러면, themes-mainroad-layouts-partials에서 math와 관련된 html 파일을 찾아서 수정해야 한다. 다행히 mathjax.html을 찾았다.
  • 당연히, 각자의 테마의 경로는 조금 다를 수 있다. 즉, 각 테마에 따라 다르게 적용되지만, 큰 흐름은 아래 해결법과 크게 다르지 않을 것 같다. (2020.4월 기준)

V. mathjax.html 소스코드 수정

처음 파일을 열었을 때에는 아래와 같은 소스코드만 존재했다.

{{ if and .IsPage (eq (.Param "mathjax") true) }}
<script src="{{ .Param "mathjaxPath" | default "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js" }}{{ with .Param "mathjaxConfig" | default "TeX-AMS-MML_HTMLorMML" }}?config={{ . }}{{ end }}" async>
</script>
{{ end }}

음.. 기본 세팅이 위와 같이 되어 있었던 것이다. 위 코드 해석은 대충 감은 오지만, 일단 신경 쓰지 말자. 그리고, Reference를 활용하여 필요한 부분만 가져온다. 그리고 적용하면 아래와 같다.

{{ if and .IsPage (eq (.Param "mathjax") true) }}
<script src="{{ .Param "mathjaxPath" | default "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js" }}{{ with .Param "mathjaxConfig" | default "TeX-AMS-MML_HTMLorMML" }}?config={{ . }}{{ end }}" async>
MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ['\\(','\\)']],
      displayMath: [['$$','$$']],
      processEscapes: true,
      processEnvironments: true,
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
      TeX: { equationNumbers: { autoNumber: "AMS" },
           extensions: ["AMSmath.js", "AMSsymbols.js"] }
    }
    });
    MathJax.Hub.Queue(function() {
      // Fix <code> tags after MathJax finishes running. This is a
      // hack to overcome a shortcoming of Markdown. Discussion at
      // https://github.com/mojombo/jekyll/issues/199
      var all = MathJax.Hub.getAllJax(), i;
      for(i = 0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
      }
    });
  
    MathJax.Hub.Config({
    // Autonumbering by mathjax
    TeX: { equationNumbers: { autoNumber: "AMS" } }
    });
</script>
{{ end }}

VI. 테스트

인라인 코드를 적용해보자. $\nabla F(\mathbf{x}_{n})$ 뭔지 모르는 수학공식을 인터넷에서 찾아서 적용했더니, 보시다시피 잘 나온다. $를 제거하면 \nabla F(\mathbf{x}_{n}) 이 코드다.

도움이 되기를 바라며..

원래 필자는 tistory에 글을 올리고 있었는데, hugo + github.io 블로그를 2020년 3월 중순 부터 만들어서 올리고 있다. 현재 강의 교재를 만드느라 정신이 없지만, 추후에 어떻게 블로그를 만드는지 한번 정리해서 올리도록 하겠다.

오늘도 Happy To Learn and Code!