웹화면에서 수식을 Latex 코드로 입력할 수 있는 javascript 패키지, MathJax를 간단하게 소개한다.
MathJax는 자체 CDN을 제공하므로 이를 이용하는 것이 편리할 것이다. 가장 기본적인 세팅으로 다음과 같이 javascript 코드를 추가한다.
<script async src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">위 비동기 javascript 코드는 어느 위치에나 넣어도 잘 작동하는 것으로 예상된다. <head> 부분에 넣으면 당연히 잘 될 것이고, 내가 <body> 가장 끝 부분에 넣어서 사용하고 있는데 잘 작동하기 때문이다.
그러고 나서는 본분에 MathJax가 알려주는 식별자를 통해 수식을 넣을 수 있다. 이미 Latex를 통해 수식을 많이 써왔다면 MathJax 사용에 큰 어려움은 없을 것이다. 기본 세팅에서 식별자는 두 가지가 있다. (실제로 식별자를 넣어버리면 안보이니까 백슬래시 대신 그냥 슬래시로 표현했다)
- inline 모드: 백슬래시+소괄호 /( ... /)
- display 모드: 백슬래시+대괄호 /[ ... /]
inline 모드는 내용 안에 일반 글자와 같이 입력되는 것이고, (요렇게 /(x=1/)\(\rightarrow x=1\)) display 모드는 독자적인 공간에 입력되는 것이다. /[x=1/]은 이렇게 된다. \[x=1\]
MathJax documentation에서 위에서 설명한 전반적인 사항을 소개하고, 더 자세한 사항은 MathJax Latex support 페이지에서 확인할 수 있다. 위에서 설명한 수준 이상의 Latex를 사용하기 위해서는 꼭 읽어보는 것을 권한다. 나 자신에게도 권한다...
반응형
'Programming > Front-end' 카테고리의 다른 글
| iframe 높이 100% 맞추기 (4) | 2017.01.08 |
|---|---|
| 효과적인 코드 시각화, highlight.js (0) | 2016.11.28 |
| c3.js 여러 종류의 차트 사용법 (0) | 2016.08.22 |
| Bootstrap 기반 티스토리 스킨: 첫 작업 기록 (4) | 2016.08.21 |
| Bootstrap container 폭 넓이 조정 (0) | 2016.07.30 |