티스토리 블로그에서 수학 공식을 예쁘게 표시하는 방법 (KaTeX 사용법)

수학 공식이나 머신러닝 관련 수식을 티스토리 블로그에 작성해보신 분들이라면 이런 경험 있으실 거예요:

d(x, y) = \sqrt{\sum_{i=1}^{n}(x_i - y_i)^2}

분명 LaTeX 문법으로 썼는데, 그대로 텍스트로 보이기만 한다고요?

그 이유는 티스토리는 기본적으로 수학 공식(LaTeX)을 렌더링하는 기능이 없기 때문입니다.
하지만 걱정 마세요! 아주 간단한 설정만 해주면 수학 공식을 예쁘게 수식 형태로 표시할 수 있습니다.
이번 글에서는 KaTeX을 활용한 설정 방법과 사용 예시까지 알려드릴게요.

---

✅ KaTeX란?

KaTeX는 LaTeX 문법으로 작성된 수학 공식을 웹에서 빠르게 렌더링해주는 라이브러리입니다.
MathJax보다 가볍고 빠르기 때문에 블로그나 기술 문서에 매우 적합합니다.

---

🔧 티스토리에 KaTeX 설정하는 방법

1단계. 티스토리 관리자 페이지 접속

[티스토리 관리 > 꾸미기 > HTML/CSS 편집] 메뉴로 이동합니다.

2단계. </head> 태그 바로 위에 아래 코드를 추가

<!-- KaTeX for LaTeX math rendering -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
        onload="renderMathInElement(document.body, {
          delimiters: [
            {left: '$$', right: '$$', display: true},
            {left: '$', right: '$', display: false}
          ]
        });">
</script>

💡 이 스크립트는 $...$ 또는 $$...$$로 감싼 수식을 자동으로 감지하고 렌더링해줍니다.

---

✍️ 수식 입력 예시

▶ 인라인 수식 (본문 중간에 넣는 방식)

$E = mc^2$

결과:
👉 E = mc²

---

▶ 디스플레이 수식 (가운데 정렬되는 블록 형태)

$$
d(x, y) = \sqrt{\sum_{i=1}^{n}(x_i - y_i)^2}
$$

결과:

👉

d(x,y)=∑i=1n(xi−yi)2d(x, y) = \sqrt{\sum_{i=1}^{n}(x_i - y_i)^2}d(x,y)=i=1∑n​(xi​−yi​)2​

---

📌 주의사항

• 미리보기에서는 수식이 제대로 보이지 않을 수 있습니다.
  → 실제 블로그 포스트로 발행 후 확인하세요.
• 티스토리 에디터에서는 HTML/텍스트 모드를 사용하는 것이 안전합니다.
• 글에 수식이 많은 경우 페이지 로딩이 살짝 느려질 수 있으니 중요한 수식만 표시하는 것도 팁!

---

✅ 마무리 요약

항목설명

렌더링 도구	KaTeX
설정 위치	HTML/CSS 편집 > </head> 바로 위
인라인 수식	$ 수식 $
블록 수식	$$ 수식 $$
미리보기	발행 후 확인 필수

---

🔗 참고 링크

KaTeX – The fastest math typesetting library for the web