이 글을 써야 할지 말아야 할지 고민이 많았다. 저번 포스팅을 하는데 있어서 수식을 markdown 서식에 맞춰 inline을 $ $, display를 $$ $$ 를 사용해서 입력해도 블로그 포스팅에는 전혀 반영이 되지 않아서 검색해서 찾아 보는 중

https://mkkim85.github.io/blog-apply-mathjax-to-jekyll-and-github-pages/ 여기의 글을 보고 그대로 따라하니 거의 해결이 됐지만 이번에는 displayMath를 표시하는데 있어서 수식위에는 \[ 수식 아래에는 \] 이것이 입력되서 잘 출력되지 않는 현상이 발생했다.

해당 포스팅의 댓글을 확인해보니 나뿐 아니라 이런 사람이 있는것 같고, 이에 대한 나름의 시행착오?를 정리하고 싶어서 저 원본 포스팅과 95% 이상 일치하지만 내 나름의 포스팅을 쓰기고 했다.

일단 MathJax의 공식 홈페이지에 가니 어떻게 입력하고 하는지가 나와있어(https://www.mathjax.org/#gettingstarted) 해당 내용을 원본 코드의 mathjax_support.html 파일에 입력했다.

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

이렇게 하니 원래의 문제는 수정되었지만, inlinemath의 $ $ 기능이 작동하지 않는 문제가 발생했다.

이에 대한 해결은 https://tex.stackexchange.com/questions/27633/mathjax-inline-mode-not-rendering 여기서 찾을 수 있었는데 inline을 사용할 경우는 따로 설정을 지정해줘야 했다고 한다. 그런데 이 코드를 봤을때 원본 코드에서 displaymath 부분만 삭제해주면 될듯 싶어서 삭제하니 문제없이 수식이 잘 입력되었다.

처음부터 정리하면 다음과 같다.

mathjax_support.html 파일 생성

_includes 파일안에 ‘mathjax_support.html’ 파일을 생성하고 아래 내용을 입력한다.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    TeX: {
      equationNumbers: {
        autoNumber: "AMS"
      }
    },
    tex2jax: {
    inlineMath: [ ['$', '$'] ],
    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>

여기서 원본 코드는 inlineMath 아래줄에 displayMath: [ ['$$', '$$'] ],이 추가로 입력되 있었는데 이부분이 불필요한 부분이고 아마 이것에 의해서 처음의 문제가 발생하지 않았나 싶다.

이후는 원본 블로그 포스팅에 있는 내용과 동일하다.

_layout/defaul.html 수정

그 후 _layout폴더의 defaul.html 파일의 <head> 부분을 다음과 같이 수정한다.

Markdown 옵션값 지정

수식을 사용할 포스팅의 옵션에 use_math: true를 적어준다

layout: single
title: 'Jekyll Github blog에 수식 쓰기'
categories: coding
tag: [blog, jekyll, latex]
author_profile: false
sidebar:
    nav: "docs"
use_math: true

mathjax을 사용한 수식 표현 예시

Inlinemath

$1+\frac{x}{y}$ 는 통분하면 $\frac{x+y}{y}$ 이다.

$1+\frac{x}{y}$ 는 통분하면 $\frac{x+y}{y}$ 이다.

displaymath

확률 변수 X의 분산은 다음과 같이 정의한다.

$$
\begin{aligned}
\mathbb{V}(X) = \mathbb{E}[(X-\mathbb{E}(X))^{2}]
\end{aligned}
$$

확률 변수 X의 분산은 다음과 같이 정의한다.

\[\begin{aligned} \mathbb{V}(X) = \mathbb{E}[(X-\mathbb{E}(X))^{2}] \end{aligned}\]

참고자료

  1. https://mkkim85.github.io/blog-apply-mathjax-to-jekyll-and-github-pages/
  2. https://www.mathjax.org/#gettingstarted
  3. https://tex.stackexchange.com/questions/27633/mathjax-inline-mode-not-rendering

댓글남기기

참고