수학적 수식을 표현하기 위해 라텍스(Latex)를 주로 사용합니다. 그리고 Html 에서 라텍스를 쓸 수 있게 해주는 Mathjax 라이브러리가 있습니다. 사용 방법을 일반적인 자바스크립트 라이브러리와 같습니다.

우선 Mathjax 자바스크립트 라이브러리를 설치합니다. 다음과 같이 script 태그를 산입하여 CDN으로 부터 Mathjax 라이브러리를 가져옵니다.

1

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

MathJax 라이브러리가 $ $로 \\( )\\로 둘러싸인 코드를 Latex 인라인 모드로 $$ $$ \[ \]로 둘러싸인 코드를 Latex 디스플레이 모드로 인식하도록 설정합니다. 또한 code, pre, style, script 같은 태그 안에서 $ \\( )\\ \[ \] 기호를 사용할 수 있도록 skipTags 를 설정해 줍니다. gist를 사용한다면 ignoreClass 를 설정해 줍니다. MathJax 에서 더 자세한 사항을 확인할 수 있습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    displayMath: [['$$','$$'], ['\[','\]']],
    processEscapes: true,
    processEnvironments: true,
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
	ignoreClass: ["gist-file"],
    TeX: { equationNumbers: { autoNumber: "AMS" },
         extensions: ["AMSmath.js", "AMSsymbols.js"] }
  }
});
</script>
1
2

인라인 모드 : $\phi\frac{a}{\sqrt{a^2+b^2}}$
디스플레이 모드 : $$\phi\frac{a}{\sqrt{a^2+b^2}}$$
인라인 모드 : $\phi\frac{a}{\sqrt{a^2+b^2}}$ 디스플레이 모드 : $$\phi\frac{a}{\sqrt{a^2+b^2}}$$

그 후 마크다운에서 라텍스 코드를 사용하면 위와 같이 수학기호가 깨끗이 그려집니다. 휴고를 사용하신다면, 그때 그때 입력할 필요 없이 baseof.html에 코드를 산입해도 됩니다.