LaTeX 수식을 웹 페이지에 표시하려면 브라우저에서 TeX를 실행하는 것이 아니라 JavaScript 수식 렌더러를 사용합니다. 두 표준은 MathJax(가장 기능이 풍부함)와 KaTeX(가장 빠름)입니다. 둘 다 LaTeX 수식 문법을 받습니다. 이 페이지는 두 도구를 비교합니다.
MathJax
MathJax(v3)는 LaTeX 수식, 그리고 MathML과 AsciiMath를 HTML/CSS, SVG, MathML로 렌더링합니다. MathML 출력은 스크린 리더 접근성에 유용합니다. LaTeX 수식 호환성이 가장 넓고(amsmath, 사용자 매크로, \label/\eqref까지), v3의 재작성으로 예전 속도 차이도 상당히 줄었습니다. 스크립트를 불러오기 전에 window.MathJax 객체로 설정합니다(구분 기호, 패키지 등).
<script>
window.MathJax = { tex: { inlineMath: [["$","$"]], displayMath: [["$$","$$"]] } };
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>KaTeX
KaTeX(Khan Academy 제작)는 빠르고 가벼운 렌더러입니다. 동기식 렌더링이라 리플로가 없고 크기도 작습니다. LaTeX 수식의 큰 부분집합을 지원하지만 전부는 아닙니다(특히 \label/\eqref 수식 참조는 불가). 수식이 많고 속도가 중요할 때 가장 좋습니다. CSS와 JS, 자동 렌더링 확장(renderMathInElement)을 불러옵니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex/dist/contrib/auto-render.min.js"
onload="renderMathInElement(document.body);"></script>설정, 호환성, 선택 기준
구분 기호: 인라인은 $...$ 또는 \(...\), 디스플레이 수식은 $$...$$ 또는 \[...\]을 씁니다. 어떤 것을 활성화할지 선택합니다(MathJax는 설정 객체, KaTeX는 renderMathInElement의 delimiters). 호환성: 둘 다 LaTeX의 수식만 받으며(문서 전체가 아님), 실제 TeX 엔진을 실행하지 않고 JS로 수식 조판을 다시 구현합니다. 명령 지원 범위는 MathJax가 더 넓습니다. 문서 전체를 충실하게 웹으로 옮기려면 변환 도구(tex4ht/LaTeXML)를 사용합니다(“LaTeX → HTML” 참조).
- 호환성, MathML(접근성),
\eqref→ MathJax. - 속도, 작은 크기, 많은 수식 → KaTeX.
- 문서 전체를 웹으로 → 변환 도구(“LaTeX → HTML” 참조).