MathJax

MathJax 사용하기

수학 수식을 이쁘게 표시하기 위한 도구이다. 다양한 형태로 연동 가능하지만 여기서는 웹으로 통합하는 방법을 알아보자.

작성자: http://ospace.tistory.com/ (ospace114@empal.com)

환경구성

먼저 아래 HTML 코드를 스킨 편집을 통해서 적당한 위치에 입력한다.

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

간단한 예

MathJax은 Tex, MathML, AsciiMath 입력을 지원한다. 또한 기본 출력은 HTML이지만 SVG도 지원한다.
해당 사이트에서 제공하는 간단한 예제이다.

When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are  
\\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\\]

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

사용시 주의 사항은 역슬레시(\)를 이중으로 사용해야 역슬레시가 입력된다. 그래야 제대로 MathJax에서 인식된다.

\\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\\]

인라인과 블럭 방식

여기서 시작 기호에 따라서 인라인과 블럭 방식으로 나뉘다.
인라인 방식은 문장 내에서 표시되는 방식으로 괄호나 달러를 사용해서 표시된다. 달러는 역슬레시를 사용하지 않는다.

\\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\\)
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)

$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

확실히 문장 내에 표시되기 때문인지 작게 표시된다.
다음으로 블럭 방식은 별도 줄로 표시되는 방식으로 대괄호와 달러를 사용해서 표시한다. 달러를 사용할 경우는 역슬레시를 사용하지 않고 달러를 이중으로 사용한다.

\\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\\]
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

개인적으로는 대괄호는 마크다운에서 링크 표기와 동일해서 tistory 편집시 링크로 표시되고 역슬레시를 이중으로 입력하기 귀찮다. 그래서 달러를 사용하는게 편하다.

마무리

추가로 필자는 tistory의 마크다운을 주로 사용하고 있다. 이때에서 이중 역슬레시를 입력해서 저장해서 사용하면 인라인 방식에서는 수식에 있는 싱글 역슬레시가 이중 역슬레시로 변경되고 블럭 방식인 경우 이중 역슬레시는 삼중 역슬레시로 수식 안에 있는 역슬레쉬는 이중 역슬레시으로 변경된다. 물론 추후에 그대로 사용해도 표시되는데는 문제는 없다.

When \\(a \\ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are  
\\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\\]

그리고, tistory에서 멀티라인 수식이 가능하다. KATEX에서는 이 부분이 불가능해 아무리 긴 수식이라도 한 줄에 모두 표시해야하는 불편함이 있다.

$$ \begin{align}
H(p) &= E\_p\[I\]\\\\
&= E\_p\[-\\log p\]\\\\
&= -\\sum\_{i=1}^n p(x\_i) \\log p(x\_i)
\end{align}$$

$$ \begin{align}
H(p) &= E_p[I]\\
&= E_p[-\log p]\\
&= -\sum_{i=1}^n p(x_i) \log p(x_i)
\end{align}$$

나머지 자세한 내용은 MathJax의 문서[2]를 참고하시기 바랍니다.

참고

[1] MathJax official site, https://www.mathjax.org/
[2] MathJax API documentation, https://docs.mathjax.org/en/latest/api/index.html
[3] AsciiMath offical site, https://asciimath.org/