티스토리 MathJax 사용 방법

블로그에 수식 입력할 때 쓰는 라이브러리중에 가장 괜찮은 게 MathJax인 것 같습니다. 그 이유는 아래와 같습니다.

• arXiv, Wikipedia, MathOverflow 등 여러 저널 및 웹 사이트에서 사용중인 주류 라이브러리다
• 오픈소스(Apache License)
• LaTeX과 문법이 동일해 사용이 편리하다
  (MathJax 2.7버전까지는 TeX 문법을 제공했지만 3버전부터는 LaTeX 문법을 제공하고, tex2jax 함수도 제공함)
• 설치가 간편하다
• 여러 브라우저와 OS에 호환된다

다만 단점도 있는데 클라이언트에서 tex 문법으로 수식을 생성하기 때문에 오버헤드가 좀 있습니다. 페이지에 수식이 굉장히 많은 경우 (ex. MathJax quick reference) 렌더링만 10초 이상 걸리기도 합니다. 그래서 클라이언트가 중요한 사이트는 서버사이드 렌더링을 쓰는 곳도 있습니다.

 

출력 예시)

\(a \ne 0\) 일 때, \(ax^2 + bx + c = 0\) 의 해는 2개이며, 그 해 x는 아래와 같다.

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

\(a \ne 0\) 일 때, \(ax^2 + bx + c = 0\) 의 해는 2개이며, 그 해 x는 아래와 같다.
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]

 

이런식으로 문단 속에 인라인으로 수식을 넣을 수도 있습니다.

본 글은 2.7버전이 아닌 3.0.0버전 기준으로 설치하니까 혼동되지 않게 주의 바랍니다.

 

티스토리 MathJax 사용 방법 (3.0.0 이상 버전 기준)

(1) Mathjax 홈페이지에 접속 해 Documentation - Getting Started 밑에 있는 Learn more 버튼을 누른다

 

 

(2) Simple integration 맨 위에 있는 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>

위 코드를 써놓으면 cdn에서 알아서 최신 버전을 로드해 버전관리하는 번거로움이 없습니다.

특정 버전을 로드하고 싶다면 mathjax@3 부분을 mathjax@3.0.0 이런식으로 적으면 됩니다.

 

 

(3) 티스토리 스킨 편집 - HTML 편집에서 head 태그 안에 위에서 복사한 스크립트를 복사한다.

잘 모르겠으면 예시 페이지를 참고해주세요.

 

 

MathJax 3.0.0 이상 버전 문법

2.7버전과 수식 문법이 약간 달라졌습니다. 이전까지는 TeX 문법을 사용했는데 3버전부터는 LaTeX 문법으로 바뀌었습니다.

• 수식의 형태: \[...\] 또는 $$...$$
• 인라인 수식의 형태: \(...\) ($...$는 3 버전부터 더이상 사용되지 않음)

수식 시작과 끝 부분이 원래 달러 표시 한개나 두개로 표현됐었는데 HTML에 달러를 표시할 때 애로사항이 있어 이렇게 바뀐 것 같습니다.

 

위 표가 TeX와 LaTeX의 수식 문법인데 LaTeX 방식으로 바뀐 걸 알 수 있습니다.

나머지 문법은 밑 링크를 참고하면 됩니다. 여기 다 쓰긴 너무 많습니다.

• LaTeX/Mathematics (Wikipedia)
• http://www.statpower.net/Content/310/R%20Stuff/SampleMarkdown.html
• https://www.calvin.edu/~rpruim/courses/s341/S17/from-class/MathinRmd.html
• MathJax Documentation