생활정보연구소
MathJax 자바스크립트로 블로그나 웹사이트에 수식 입력하기 본문
가끔 블로그나 홈페이지에 수식을 입력해야 할 때가 있습니다. 이럴때 어떻게 하시나요? 일반적인 에디터에선 수식입력기를 지원하지 않기 때문에 수식을 예쁘게 그리기가 어렵더라구요. 편법으로 MS워드 수식입력기로 수식을 만들고 이미지로 저장하는 방법을 썻었죠. 이것도 방법이긴 한데 html을 활용해서 공식을 입력하는 방법이 있을거 같아 알아봤습니다.
MathJax라는 오픈소스 자바스크립트를 활용하면 웹사이트나 블로그에 쉽게 수식을 입력할 수 있습니다. 적용 방법과 사용법도 간편하더라구요. 자세히 알아보겠습니다.
1. MathJax 설치 방법
먼저 홈페이지에 MathJax 자바스크립트 코드를 넣어야 합니다.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
위의 코드를 html 코드 <head>...</head> 사이어 넣어줘야 합니다.
티스토리의 경우 티스토리 관리모드→꾸미기→스킨편집→html편집 으로 들어갑니다. Ctrl+F 버튼을 누르고 </head>로 검색후 위의 코드를 </head> 위쪽에 붙여넣고 적용버튼을 누르면 MathJax 스크립트를 사용할 수 있습니다.
2. 사용방법
공식을 입력하기 위해서 티스토리 html 모드에서 편집을 하시면 됩니다. 예를 들어보겠습니다. 아래는 가스연료의 호환성을 판단하는 웨버지수 공식입니다.
WI : 웨버지수
H : 단위체적당 발열량 (kcal/Nm3)
S: 가스의 비중
수식은 아래와 같이 코드를 입력하시면 됩니다.
$$ WI=\frac{H}{\sqrt{S}} $$
수식은 항상 $$으로 시작하고 $$으로 끝납니다. 기본적인 명령어는 아래와 같습니다.
분수는 \frac{분자}{분모}
루트 \sqrt{ }
윗첨자 ^ , 아랫첨자 _
이정도만 알고 있어도 기본적인 수식은 거의 표현이 가능합니다. 기타 자세한 명령어를 확인하고 싶다면 Tree of Math 사이트를 참조 바랍니다.
하나더 예를 들어보겠습니다. 노즐지름 변경율이라는 공식입니다.
D1 : 처음 상태의 노즐지름 [mm]
D2 : 변경된 상태의 노즐지름 [mm]
WI1 : 처음 상태의 웨버지수
WI2 : 변경된 상태의 웨버지수
P1 : 처음 상태의 압력 [kPa]
P2 : 변경된 상태의 압력 [kPa]
루트가 많아서 복잡해보이는 수식인데요. 아래와 같이 코드를 입력하시면 됩니다.
<p>$$\frac{D_2}{D_1} = \sqrt{\frac{HI_1\sqrt{P_1}} {HI_2\sqrt{P_2}}}
= \sqrt{\frac{H_1\sqrt{P_1/S_1}} {H_2\sqrt{P_2/S_2}}} $$ </p>
3. 주의 사항
MathJax를 활용하면 쉽게 예쁘고 깔끔한 수식을 출력할 수 있습니다. 다만 수식을 많이 사용하면 로딩이 생깁니다. 따라서 수식이 많은 경우에는 이미지를 활용하는 것이 더 나을거라 생각되네요. 저도 자주는 아니지만 가끔 유용하게 사용할 거 같습니다.
저는 미리보기에서는 수식이 잘 적용이 되는데 막상 발행을 하면 수식 적용이 안되네요. 다른 스크립트와 뭔가 충돌이 일어나는거 같은데 원인 확인 중입니다.
