HTML에서 수학 관련 기호/수식을 표현하기 위한 방법 - MathJax.js
사실 제가 수학을 잘 못해서 ^^ 수학 관련 글을 쓰는 경우는 거의 없습니다. 그래도 가끔씩 재미삼아 해보기는 하는데 그 때마다 블로그에 간단한 수학 식을 써야 할 때면 그래픽 이미지를 첨부해야 하는 불편함이 있었습니다. 예를 들어, 다음의 글에서도 그래픽으로 수학 수식을 저장해 놓고 첨부한 경우입니다.
황금비율 증명
; https://www.sysnet.pe.kr/2/0/1312
그런데 오늘 우연히 다음의 블로그를 방문하게 되었는데요.
알고리즘 대회에 필요한 수학
; https://algospot.com/wiki/read/%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98_%EB%8C%80%ED%9A%8C%EC%97%90_%ED%95%84%EC%9A%94%ED%95%9C_%EC%88%98%ED%95%99
놀랍게도 내부에 표현된 수학 기호 및 수식들이 이미지가 아닌 텍스트 형식이었습니다. (물론 ^^ 행렬도 표현할 수 있고.)
IE 개발자 도구를 통해 소스를 살펴 보니 다음과 같이 span 태그의 class값이 mathjax-preview와 "math/tex" 타입의 스크립트 태그가 연이은 형태로 구성되어 있습니다.
<script type="math/tex">\begin{pmatrix}2 & 3 \\1 & 2\end{pmatrix}</script>
위의 태그가 HTML 페이지에서 다음과 같이 바뀌어서 보이게 되는 것입니다. (네이버 블로그에서는 그냥 문자열로 출력됩니다.)
어떻게 된 일인지 파악하기 위해 해당 페이지에 링크된 자바스크립트 목록을 보니 MathJax.js가 눈에 띄는데요.
<script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js"></script>
MathJax.js 파일의 내용에는 제 블로그에도 무료로 사용할 수 있다는 사실을 알려주고 있습니다. ^^
/*
* /MathJax.js
*
* Copyright (c) 2009-2014 The MathJax Consortium
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
좀 더 정보를 찾아보니 MathJax.js가 Latex 수식을 지원한다는군요. ^^
블로그(예: 티스토리)에서 latex (라텍) 수식 쓰기
; http://soojob.tistory.com/31
사용법을 간단하게 정리하면 다음의 HTML 페이지로 보여드릴 수 있습니다. ^^
<!DOCTYPE html>
<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: [],
jax: ["input/TeX", "output/HTML-CSS"],
preRemoveClass: "mathjax-preview",
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
<script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js"></script>
</head>
<body>
<span class="mathjax-preview">\begin{pmatrix}2 & 3 \\1 & 2\end{pmatrix}</span><script type="math/tex">\begin{pmatrix}2 & 3 \\1 & 2\end{pmatrix}</script>
</body>
</html>
오호~~~ 멋집니다. ^^ 이제 제 블로그 글에서도 가볍게 Latex 수식을 쓸 수 있게 되었습니다. ^^
참고로, 다양한 수식에 대한 TeX 표기 예제는 다음의 글을 참조하세요. ^^
Mathematical Notation: LaTeX, Mathematica, HTML Entities, Unicode
; http://hyperpolyglot.org/math-notation
문제는 스크립트 태그를 넣을 수 없는 네이버 블로그인데요. 구글에서 TeX에 대해 착한 서비스를 하고 있군요. ^^
네이버 블로그에서 수식입력기 없이 수식 입력하기
; http://yut951121.blog.me/100184779927
그래서 다음과 같이 아예 이미지로 출력 결과가 나옵니다.
<img alt='TeX' src="http://chart.apis.google.com/chart?cht=tx&chl=x=\frac{-b\pm%20\sqrt{b^2%20-4ac}}{2a}">
<img alt='TeX' src="http://chart.apis.google.com/chart?cht=tx&chl=\begin{pmatrix}+2+%26+3+\\+1+%26+2+\end{pmatrix}">
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]