홈페이지에 수식을 표현해보자(MathJax)

본 내용은 MathJAX 최신 버전에 맞추어 새로 갱신된 내용입니다.(2020-07-18갱신)

물리 관련 홈페이지이다 보니 수식을 적용할 일이 많습니다.
수식을 이미지화하는 것이 매우 불편하기 때문에, 홈페이지에서 직접 수식을 표현해주면 좋을 것 같아서 자료를 찾아보았더니 있습니다.
오늘 소개해드릴 온라인 스크립트는 MathJax입니다.

홈페이지의 index파일의 헤더에 다음의 내용을 추가합니다.

<!-- MathJax Begin -->
<script type="text/javascript" id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.0/es5/latest?tex-mml-chtml.js"> </script>
<script> MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] } }; </script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"> </script> <!-- MathJax End -->

다음과 같이 입력을 하면(앞 뒤에 $$ 생략됨)

 x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} 

수식으로 예쁘게 표현됩니다. 이미지가 아닙니다.

$$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$

문법을 알고 있어야 한다는 불편이 있긴 합니다. 
많이 사용하시다 보면 문법에 익숙해지는 자신을 발견하실 수도 있습니다.

아래 내용은 플래시가 더이상 보안 문제로 웹브라우저에서 지워하지 않기 때문에 사용하실 수 없습니다.

수식을 보다 편하게 입력하시려면 다음수식편집기를 사용하시면 됩니다.
이미지로 저장되며, 편집화면에서 다시 수정하실 수 있습니다.

티스토리 사용자의 경우 편집화면에 수식입력(다음수식편집기)이 있습니다.
(전 오늘 처음 알았어요. ㅡㅡ;;)

 

 

다음 수식편집기로 입력해 본 예입니다.

 

 

참조한 사이트

http://ledgku.tistory.com/27

http://kipid.tistory.com/entry/equations-in-html