[HTML / 티스토리 스킨] HTML 문서에서 LaTeX 로 수식 작성하기

논문 구현에 대한 설명을 하다 보니 함수에 쓰인 수식들을 표현해야 할 때가 많다.  하지만 사용하던 티스토리 스킨에서는 수식을 캡처하여 이미지로 입력해야 했다. 그렇기 때문에 쉽고 간편하게 수식을 작성하기 위해서 LaTeX라는 수식을 멋드러지게 작성할 수 있게 도와주는 문서 작성 도구를 스킨에 적용해보려고 한다.

1. 스킨에 LaTeX를 적용하기

• 스킨에 LaTeX를 적용하는 방법은 간단하다.
• Head 에 아래 script를 추가하면 끝!이다.

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  },
  svg: {
    fontCache: 'global'
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

출처: Configuring and Loading MathJax — MathJax 3.2 documentation

2. LaTeX로 수식 작성하기

• 수식을 작성하기 위해서는 몇 가지 규칙을 알아야 한다.
  1. 수식은 $$ 사이에 작성한다.
  2. 기호 앞에는 \를 붙여야 한다. (위첨자, 아래첨자 제외)
• 자주 쓰는 수식 기호

기호	LaTeX 문법	설명
$\frac{y}{x}$	\frac{y}{x}	분수
$\sqrt{x}$	\sqrt{x}	루트
$\vec{x}$	\vec{x}	벡터
$\vec{a}\cdot\vec{b}$	\vec{a}\cdot\vec{b}	내적 (스칼라곱)
$\vec{a}\times\vec{b}$	\vec{a}\times\vec{b}	외적(벡터곱)
$\sum_{x=1}^n$	\sum_{x=1}^n	시그마
$\bar{x}$	\bar{x}	첨자: 평균기호
$\hat{x}$	\hat{x}	첨자: hat
$x^2$	x^{2}	위 첨자 (지수)
$x_2$	x_{2}	아래 첨자
$\neq$	\neq	관계성 기호
$\geq$	\geq	관계성 기호
$\leq$	\leq	관계성 기호
$\approx$	\approx	관계성 기호
$\mathbb{R}$	\mathbb{R}	실수
$\subset$	\subset	부분집합
$\therefore$	\therefore	따라서
$\because$	\because	때문에