MathJax

MathJax는 마크다운 기반의 사이트에서 널리 사용되는 $\LaTeX$ 수식 렌더링 JS 라이브러리입니다.

이 포스트는 제가 MathJax를 사용하면서 경험한 것들과 도움이 된 자료들을 정리하는 포스트입니다 :)

---

MathJax 공식 도큐먼트

• TeX and LaTeX math delimiters¹
  • 마크다운 내에서 MathJax 렌더링에 쓰는 $와 달러를 표시할 때 쓰는 $의 구분에 대한 문서입니다. processEscapes: true로 해결할 수 있습니다.
• The TeX/LaTeX Extension List
  • equation numbering을 위해 ams extension을 사용하기도 합니다.
• Automatic Equation Numbering
  • tag: ams와 \begin{equation} ... \end{equation} 구문을 이용해 적용할 수 있다.

---

LaTeX / MathJax 문법

모두 적지는 않고, 헷갈리는 문법만 적도록 하겠습니다.

• 중괄호 { }: inlineMath vs. displayMath
  • inlineMath: \\{ ... \\}으로 사용
  • displayMath: \{ ... \}으로 사용
• Scalable 중괄호
  • ininteMath: \left\\{ ... \right\\}
  • displayMath: \left\{ ... \right\}
  • EX) $\left\{\dfrac{x}{y}\right\}$
• 분수; fraction
  • \frac{}{}: $\frac{x}{y}$
  • \dfrac{}{}: $\dfrac{x}{y}$
  • \tfrac{}{}: $\tfrac{x}{y}$
  • \frac과 \tfrac은 inline에선 거의 차이가 안 나고, display에서는 차이가 명확히 나타난다.
  • 반면에 \dfrac과 \frac은 display에서 거의 차이가 안 난다.

＊ (display) frac

\[\frac{x^3+5x^2+4}{x^2-2}(x+6)^2\]

＊ (display) tfrac

\[\tfrac{x^3+5x^2+4}{x^2-2}(x+6)^2\]

＊ (display) dfrac

\[\dfrac{x^3+5x^2+4}{x^2-2}(x+6)^2\]

• Alignment
  • 수식 여러 개를 형식에 맞춰 작성할 때 사용한다.

    \begin{aligned}
    ax &= ay \\
    x &= y
    \end{aligned}
    

\[\begin{aligned} ax &= ay \\ x &= y \end{aligned}\]

• disjoint union
  • 공식 $\LaTeX$에선 \uplus $\uplus$만 지원하는 것 같다.
  • {\cup\mkern-13mu\cdot\mkern5mu}를 통해서 ${\cup\mkern-13mu\cdot\mkern5mu}$ 기호를 직접 커스텀해야 한다.
  • 또는 유니코드 문자 ⊍를 직접 넣는 방법도 있다. $⊍$

---

mathjax-support

제가 쓰는 MathJax 라이브러리를 불러오는 html 파일입니다.

<script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(','\\)']],
        displayMath: [ ['$$', '$$'], ['\\[','\\]'] ], // ok to remove
        processEscapes: true, // make distinguishable with $ and \$.
        categories: 'ams', // equation numbering
      }
    };
</script>

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

MathJax 공식 문서에 따른 아래의 구문을 통해 MathJax의 latest 버전을 로드할 수 있습니다.

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

---

그 외의 Reference

• Wikipedia/List of mathematical symbols by subject
• Detexify
  • 심볼만 알고 정확한 이름은 모르는 구문을 필기로 찾을 수 있게 해준다.
• Overleaf/Mathematical fonts

---

1. delimiter: 구분 문자; 영역 사이 경계를 지정하는 사용하는 하나의 문자. C언의 세미콜론 ;가 대표적인 예이다. ↩