이전까지는 블로그에 수학 수식을 보여주기 위해 이미지를 복사하거나 업로드했지만 너무 비효율적이라고 생각해서 다른 방법을 찾게 되었고 MathJax라는 것을 알게 되었습니다.
MathJax는 HTML 문서에서 수학 수식을 표현할 수 있게 해주는 오픈소스 스크립트라고 합니다.
그리고 수식 입력은 LaTeX나 MathML로 할 수 있습니다.
적용 방법은 간단합니다. <head>...</head> 사이에 아래 코드를 삽입하면 됩니다.
<script type="text/x-mathjax-config"
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']]
}
</script>
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>여기서 중요한 것은 x-mathjax-config 가 MathJax.js 파일을 호출하는 코드보다 위에 있어야 한다는 것입니다.
x-mathjax-config는 MathJax를 사용할 때 설정 등을 할 수 있는 부분입니다.
기본적으로 MathJax를 사용하면 자동으로 줄바꿈이 됩니다. 그래서 줄바꿈을 하고 싶지 않다면 위와 같이 설정해주어야 합니다.
실제로 사용할 때 줄바꿈을 하고 싶다면 $$ x = 0 $$ ($$ 로 수식을 감싸면 됨)과 같이 하고 쭉 이어서 쓰고 싶으면 $ x = 1 $ ( $ 로 수식을 감싸서)로 하면 됩니다.
만약 MathJax가 제대로 적용이 되지 않는다면 편집기 말고 HTML 모드로 들어가서 $ $ 사이에 다른 내용들이 없는지 확인합니다. 저 같은 경우에는 span 태그가 사이에 있어서 제대로 적용이 되지 않았었습니다.
'웹 > JS' 카테고리의 다른 글
| [웹][JS] HTML 코드에서 스크립트의 위치 (0) | 2016.10.26 |
|---|
NCookie