소방기술사 관련 포스팅을 하다보니 블로그에 수식을 넣어야 할 경우가 아주 많습니다. 수식을 통해 계산하고 증명해야 하는 문제가 종종 나오기 때문입니다. 수식은 일반적인 알파벳, 한글과는 다르기 때문에 블로그에 쓰기가 쉽지 않습니다.
이를 위해 개발된 것이 MathJax 코드입니다. 이 코드를 사용하면 웹상에서도 수식을 보기 좋게 표현할 수 있습니다. 아무래도 손으로 쓸 수 없기 때문에 이런식으로 코드를 활용해 수식을 사용하는 것입니다.
방법: MathJax 코드를 블로그 html에 삽입
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'> MathJax.Hub.Config({ HTML: ["input/TeX","output/HTML-CSS"], TeX: { extensions: ["AMSmath.js","AMSsymbols.js"], equationNumbers: { autoNumber: "AMS" } }, extensions: ["tex2jax.js"], jax: ["input/TeX","output/HTML-CSS"], tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true }, "HTML-CSS": { availableFonts: ["TeX"], linebreaks: { automatic: true } } }); </script>
위 코드를 그대로 복사하셔서 아래 순서대로 붙여넣기 하시면 됩니다.
1. 블로그 관리자 화면에서 테마 - 맞춤설명 옆 화살표 클릭
3. 위에서 복사한 코드를 <head>아래 부분에 붙여넣기 후 우측 부분에 저장하기 버튼 클릭.
MathJax 코드 활용하는 방법
ax + b = c
$ax+b = c$
위 두 수식 간에 차이가 보이시나요? 이거는 간단한 수식이라 차이가 보이지 않으실 것 같습니다. 좀 더 복잡한 방정식을 써보겠습니다.
ax^3 + bx^2 + cx + d = e
$ax^3 + bx^2 + cx + d = e$
이제는 어느정도 차이가 보이실 겁니다. 이 코드를 쓰는 방법은 내가 삽입하려는 수식 양쪽 끝에 $표시를 넣어주시면 됩니다.
그리고 추가적으로 달러표시는 양쪽 끝에 두개씩 넣으면 수식이 글의 한 가운데로 오게 됩니다. 바로 아래에 써보았는데요 위쪽에 있는 수식은 달러표시를 1개만 넣은 것이고, 아래쪽에 있는 수식은 달러 표시를 2개 넣은 것입니다.
$ax^3 + bx^2 + cx + d = e$
$$ax^3 + bx^2 + cx + d = e$$
그리고 보다 복잡한 수식을 써야하신다면 아래 링크를 통해 코드 에디터 사이트로 이동할 수 있습니다. 여기에서는 보다 복잡한 코드를 사용할 수 있습니다.
$e^x=1+x+\frac{x^2}{2}+\frac{x^3}{6}+\cdots=\sum_{n\geq 0} \frac{x^n}{n!}$
예를 들면 이렇게 복잡한 수식도 쓸 수 있습니다.
https://products.aspose.app/tex/equation-editor/svg
이상으로 MathJax 코드를 블로그스팟에서 활용하는 방법을 간단히 알아보았습니다. 티스토리 블로그에서 많이 사용했던 기능인데, 블로그스팟도 html을 수정할 수 있는 블로그이다보니 티스토리와 동일하게 적용이 되는 걸 알 수 있습니다.
감사합니다.
댓글 쓰기