GitHub 블로그에 mathjax 추가하기

이 블로그는 minimal mistakes theme을 바탕으로 만들어진 블로그 입니다. Github 블로그는 기본적으로 수식을 제공하지는 않지만 mathjax를 추가하여 LaTeX 문법을 이용한 수식 표현들이 가능합니다.

일반적인 github blog에 추가하는 방식

1. _config.yml에 아래의 markdown: kramdown을 넣습니다.

        # Math equation
        markdown: kramdown
   

2. _includes에 mathjax_support.html 생성하여 아래의 코드를 넣습니다.

        <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            TeX: {
            equationNumbers: {
                autoNumber: "AMS"
            }
            },
            tex2jax: {
            inlineMath: [ ['$', '$'] ],
            displayMath: [ ['$$', '$$'] ],
            processEscapes: true,
        }
        });
        MathJax.Hub.Register.MessageHook("Math Processing Error",function (message) {
            alert("Math Processing Error: "+message[1]);
            });
        MathJax.Hub.Register.MessageHook("TeX Jax - parse error",function (message) {
            alert("Math Processing Error: "+message[1]);
            });
        </script>
        <script type="text/javascript" async
        src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
        </script>
   

3. _includes의 head.html 파일에 코드 추가합니다.

        {% if page.use_math %}
            {% include mathjax_support.html %}
        {% endif %}
   

Minimal Mistakes theme

하지만, 위의 방법을 제가 사용하고 있는 이 테마에 적용하면 local에서는 수식이 제대로 보이지만 레포지토리에 push를 하는 경우 수식이 깨지는 에러가 발생합니다. 이를 해결하기 위해서 How to add Latex to Minimal Mistakes 해당 글을 참조하였습니다. (다른 테마를 사용해본적이 없어 다른 곳에도 적용되는지는 잘 모르겠습니다.)

1. _config.yml에서 마크다운 engine을 kramdown으로 변경합니다.

        # Math equation
        markdown: kramdown
   

2. script.html을 복사합니다. 원래의 Minimal Mistakes repo에서 minimal-mistakes/_includes/scripts.html 의 경로를 따라 들어가서 코드를 복사하고, 자신의 레포지토리의 _includes/scripts.html에 덮어씁니다. (아래의 코드는 해당 코드와 동일합니다.)

        {% if site.footer_scripts %}
        {% for script in site.footer_scripts %}
            <script src="{{ script | relative_url }}"></script>
        {% endfor %}
        {% else %}
        <script src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
        {% endif %}
   
        {% if site.search == true or page.layout == "search" %}
        {%- assign search_provider = site.search_provider | default: "lunr" -%}
        {%- case search_provider -%}
            {%- when "lunr" -%}
            {% include_cached search/lunr-search-scripts.html %}
            {%- when "google" -%}
            {% include_cached search/google-search-scripts.html %}
            {%- when "algolia" -%}
            {% include_cached search/algolia-search-scripts.html %}
        {%- endcase -%}
        {% endif %}
   
        {% include analytics.html %}
        {% include /comments-providers/scripts.html %}
   
        {% if site.after_footer_scripts %}
        {% for script in site.after_footer_scripts %}
            <script src="{{ script | relative_url }}"></script>
        {% endfor %}
        {% endif %}
   

3. script.html에 아래의 코드를 복사해서 붙여 넣습니다.

        <script type="text/javascript" async
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML">
        </script>
   
        <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            extensions: ["tex2jax.js"],
            jax: ["input/TeX", "output/HTML-CSS"],
            tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
            processEscapes: true
            },
            "HTML-CSS": { availableFonts: ["TeX"] }
        });
        </script>
   

4. 수식이 아래와 같이 잘 나오는지 확인합니다.

\[f\left(x\right) = x^{2}\]

Reference

• https://m.blog.naver.com/PostView.nhn?blogId=prt1004dms&logNo=221525385428&proxyReferer=https:%2F%2Fwww.google.com%2F
• https://www.janmeppe.com/blog/How-to-add-mathjax-to-minimal-mistakes/