MathJax
AI
gemma-4-31b
MathJax
MathJax는 웹 브라우저에서 LaTeX, MathML, AsciiMath 등의 수식 표기법을 렌더링하기 위한 JavaScript 라이브러리이다. 웹 페이지 내에서 복잡한 수학 기호와 수식을 고품질로 표시할 수 있게 해주며, 별도의 플러그인 설치 없이 표준 웹 브라우저에서 작동한다.
주요 특징
- 높은 브라우저 호환성: 최신 웹 브라우저뿐만 아니라 다양한 환경에서 일관된 수식 렌더링을 제공한다.
- 다양한 입력 방식 지원: 학계에서 표준으로 사용되는 LaTeX 외에도 MathML, AsciiMath를 모두 지원한다.
- 접근성 제공: 스크린 리더 등을 통해 시각 장애인도 수식 내용을 파악할 수 있도록 접근성 기능을 지원한다.
- 확장성: 사용자 정의 설정 및 플러그인을 통해 렌더링 방식과 동작을 세밀하게 제어할 수 있다.
설치 및 설정 방법
CDN 사용법
가장 간단한 방법은 CDN(Content Delivery Network)을 통해 스크립트를 불러오는 것이다. 최신 버전인 v3를 기준으로 다음과 같이 HTML <head> 섹션에 추가한다.
<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>
로컬 설치 방법
오프라인 환경이나 성능 최적화가 필요한 경우, npm을 통해 라이브러리를 설치하여 사용할 수 있다.
npm install mathjax
기본 사용법
MathJax는 특정 구분자(Delimiter)를 통해 텍스트 내의 수식을 인식한다.
- 인라인 수식 (Inline Math): 문장 중간에 수식을 삽입할 때 사용하며, 보통
$...$또는\( ... \)로 감싼다.- 예:
$\pi r^2$$\rightarrow \pi r^2$
- 예:
- 디스플레이 수식 (Display Math): 수식을 별도의 줄에 중앙 정렬하여 표시할 때 사용하며,
$$...$$또는\[ ... \]로 감싼다.- 예:
$$\int_{a}^{b} f(x) dx$$
- 예:
지원하는 문법
MathJax는 LaTeX의 기본 문법을 광범위하게 지원한다.
% 분수와 루트
\frac{a}{b}, \sqrt{x^2 + y^2}
% 그리스 문자
\alpha, \beta, \gamma, \Omega
% 합계와 적분
\sum_{i=1}^{n} i, \int_{0}^{\infty} e^{-x} dx
% 행렬
\begin{matrix} 1 & 0 \\ 0 & 1 \end{matrix}
버전별 차이점 (v2 vs v3)
MathJax v3는 v2에 비해 렌더링 속도가 획기적으로 개선되었으며, 모듈형 구조로 변경되었다.
| 구분 | MathJax v2 | MathJax v3 |
|---|---|---|
| 렌더링 속도 | 상대적으로 느림 | 매우 빠름 (최적화됨) |
| 설정 방식 | MathJax.Hub.Config() 사용 |
window.MathJax 객체 설정 사용 |
| 패키지 구조 | 단일 거대 라이브러리 | 필요한 기능만 선택하는 모듈형 |
| 브라우저 지원 | 구형 브라우저 광범위 지원 | 최신 표준 브라우저 중심 (Polyfill 필요) |
유사 라이브러리 비교
| 비교 항목 | MathJax | KaTeX |
|---|---|---|
| 렌더링 속도 | 보통 | 매우 빠름 |
| 기능 완성도 | 매우 높음 (거의 모든 LaTeX 지원) | 높음 (주요 문법 위주 지원) |
| 설정 유연성 | 매우 높음 | 보통 |
| 작동 방식 | JavaScript 기반 동적 렌더링 | CSS 기반 정적 렌더링 중심 |
AI 생성 콘텐츠 안내
이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.
주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.