MathJax 사용법 정리
한양대 미분적분학 기출 해설 사이트를 만들면서 MathJax를 사용할 일이 굉장히 많았습니다. 이 글에서는 이렇게 지지고 볶은 MathJax의 사용법을 정리합니다.
목차
MathJax 설치하기
MathJax(매스작스)는 웹사이트에 수학 식을 표시할 수 있게 해 주는 자바스크립트 라이브러리입니다.
웹사이트에 MathJax를 설치하는 건 간단합니다. 아래 자바스크립트 태그 하나만 웹사이트에 추가하면 끝입니다.
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
MathJax 공식 사이트에서도 안내하는 바입니다.
수학 식 작성하기
MathJax는 LaTeX 문법을 지원합니다. LaTeX의 방대한 문법을 모두 알아야 하는 건 아니고 수학 식을 작성하는 부분만 알면 됩니다.
수학 식을 작성할 때는 Display 모드와 Inline 모드 두 가지 중에서 선택할 수 있습니다. Display 모드는 아래와 같이 수학 식이 너비 전체를 차지하는 모드이고
$$a^2=\sqrt{b^2+c^2-2bc\cos{\theta}}$$
Inline 모드는 $a^2=\sqrt{b^2+c^2-2bc\cos{\theta}}$처럼 수학 식이 문장 속에 섞여들어가는 모드입니다.
Display 모드로 수학 식을 작성하려면 달러 기호 4개($$와 $$)로 식을 둘러싸면 됩니다. 위에서 보여 드린 코사인 제2법칙 식은 $$a^2=\sqrt{b^2+c^2-2bc\cos{\theta}}$$처럼 작성되어 있습니다.
Inline 모드로 수학 식을 작성하려면 \(와 \) 사이에 식을 넣으면 됩니다. 다만 이건 귀찮습니다. 달러 기호 2개($와 $) 사이에 식을 넣는 것은 기본적으로는 비활성화되어 있습니다. Inline 모드로 식을 작성할 때 달러 기호 2개를 사용하는 것은 아래 MathJax 설정 부분에서 설명합니다.
수학 식을 작성하기 위한 기본적인 LaTeX 문법은 아래와 같습니다. 중괄호 안에 인수를 넣으면 됩니다.
- 지수:
^ - 루트:
\sqrt{} - 삼각함수:
\sin{},\cos{},\tan{} - 역삼각함수:
\sin^{-1}{},\cos^{-1}{},\tan^{-1}{} - 분수:
\frac{}{}
MathJax 설정
자바스크립트 파일로 MathJax의 여러 가지 설정을 바꿀 수 있습니다. 제가 한양대학교 미분적분학 기출 사이트에서 현재 사용하고 있는 MathJax 설정은 아래와 같습니다.
window.MathJax = {
tex: {
inlineMath: {'[+]': [['$', '$']]}
},
chtml: {
minScale: 1.1,
matchFontHeight: false,
displayOverflow: 'scroll'
},
options: {
enableMenu: false,
enableExplorer: false,
menuOptions: {
settings: {
speech: false,
braille: false
}
}
}
};저는 이 파일을 tex-script.js로 저장했습니다. 중요한 점은 이 설정 파일을 MathJax보다 먼저 불러와야 한다는 것입니다.
이 설정의 내용을 위부터 설명하겠습니다.
inlineMath는 위에서 설명했던 것처럼 Inline 모드로 식을 작성할 때 달러 기호 2개 사이에 식을 작성할 수 있게 해 줍니다.
minScale은 수학 식의 크기(배율)을 설정합니다.
matchFontHeight를 false로 설정하면 MathJax가 자동으로 수학 식의 높이를 변경하지 않습니다.
displayOverflow는 수학 식의 너비가 컨테이너를 넘어갔을 때 어떻게 동작할지 설정합니다. scroll은 식에 가로 스크롤바를 만듭니다.
mtextInheritFont를 true로 설정하면 수학 식 안에 있는 textnormal 등의 커맨드로 나오는 글자를 본문 폰트와 맞춥니다.
enableMenu를 false로 설정하면 수학 식을 우클릭했을 때 뜨는 메뉴(Context menu)를 없애 줍니다.
enableExplorer와 그 아래에 있는 설정들은 Expression Explorer를 비활성화하기 위해서 추가한 설정입니다. Expression Explorer는 접근성 목적으로 Mathjax 4.0부터 기본으로 켜지는 설정입니다. 다만 저는 수학 식을 클릭하였을 때 푸른 배경이 나오는 것이 싫어서 Expression Explorer를 비활성화했습니다.
이런 글은 어떠세요?
