Hugo + Mathjax 설정

Programming, MathJax, Settings, Hugo
Page content

I. 인라인 수식 에러

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

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

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

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

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

[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!