[MathJax] Markdown에서 LaTeX로 수식 작성하기
수학자들이 사용할 것만 같은 화려한 수식이 아니더라도 분수나 제곱근과 같이 수식으로 표현해야 좋은 내용이 있다. 본 게시글에서는 여러분의 웹 페이지에 MathJax를 사용하여 수식을 표시하는 방법에 대해서 알아볼 것이다.
MathJax? Latex?
 |
|---|
| MathJax를 사용하여 수식을 보기 좋게 표시 할 수 있다. |
문서를 표현할 때 문자와 그림 등의 요소를 조합하여 표시 할 수 있는 LaTeX(LaTeX은 레이텍 또는 라텍이라고 읽는다.)라는 시스템이 있다. LaTeX을 이용하면 수식이 삽입된 문서를 아름답게 표시할 수 있어서, 주로 수리과학을 기반으로 하는 분야의 논문을 작성할 때 LaTeX이 사용된다.
MathJax는 오픈소스로 LaTeX, MathML, 그리고 AsciiMath 표기법을 사용한 수식을 표시해주는 JavaScript 엔진이다. Markdown으로 작성된 텍스트를 Jekyll을 통하여 웹페이지로 표시하는 것과 비슷하게 수식을 LaTex 표기법으로 작성하면 웹페이지에 수식을 표시할 수 있도록 구현한 시스템이다.
자세한 내용은 MathJax Documentation을 참고하자.
| 타입 | 표기법 | 표시해줄 수 있는 엔진 |
|---|---|---|
| 게시글 | Markdown, Kramdown, … | GitHub, Jekyll, … |
| 수식 | LaTeX, MathML, AsciiMath, … | MathJax, … |
표기법에 따라서 원하는 내용을 작성하고, 적절한 엔진을 선택해서 아름답게 표시 할 수 있다.
MathJax 적용 방법
MathJax.org의 Getting Started 페이지에서 제공하는 설명대로 다음의 코드를 자신의 웹 페이지에 추가하면 된다.
 |
|---|
| 설치 방법 |
나는 Web Integration을 사용하여 MathJax를 적용하였다.
MathJax 적용 방법 - Web Integration
1
2
<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>
위의 코드를 <head> </head>사이에 기입한다.
코드만 추가하면 끝이다. 엄청 간단하다.
수식 작성하기
앞서 코드를 적용하고 나면 해당 웹 페이지에 있는 텍스트 중, $$로 좌우가 감싸진 문자열은 LaTeX 문법으로 인식하여 수식으로 변환해준다.
1
$$( a^2 )$$
위의 코드를 게시글에 추가하면 아래와 같은 수식이 표시되는것을 확인할 수 있다.
\[( a^2 )\]1
$( a^2 )$
결과 \(a^2\)
LaTex 문법
Typesetting mathematics에서 LaTeX의 여러 문법중 수식과 관련된 내용을 확인 할 수 있다.
이차방정식의 근의 공식
1
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
첨자
1
2
$$a_1, a^2, a_1^2$$
$$y_i=x_i^3+x_{i-1}^2+x_{i-2}$$
분수
분수 표기법에는 두 가지 방법이 있습니다.
\over를 사용하면 \over를 기준으로 왼쪽에 있는 수식은 모두 분자, 오른쪽에 있는 수식은 모두 분모로 들어가게 됩니다.\frac을 사용하게 되면 첫 번째 문자는 분자, 두 번째 문자는 분모로 들어가게 됩니다. 두 문자 이상이라면 중괄호{ }를 통하여 묶어주면 됩니다.
1
2
$$s^2+2s+s\over s+\sqrt s+1$$
$$\frac{1+s}{s(s+2)}$$
절대값 표기법
일반적으로 절대값을 표기할 때는 키보드 위의 | 문자를 사용하게 됩니다.
하지만 이렇게 하면 분수와 같이 큰 객체에 맞게 resizable한 기호를 사용할 수 없습니다.
그럴 땐 \vert와 \left, \right를 통하여 좌우 기호를 명시해주면 됩니다.
1
2
$$\vert x \vert$$
$$\left\lvert \frac{s^2+1}{s^3+2s^2+3s+1} \right\rvert$$
Cheat Sheet
매번 문법에 관련된 문서를 보고 작성하는것은 어려우니 Cheat Sheet를 보는것도 괜찮은 방법이다.
Comments