온라인 공간에서 수식 표현은 골칫거리 중 하나입니다.
블로그 에디터(네이버/다음/Tistory)나 구글에 수식입력 시스템이 있으나(장족의 발전이긴 합니다만...),
결과물을 이미지 형태로 뿌려주기 때문에, 제공주체 측에서 이미지링크를 바꿔버리면 내가 열심히 입력한 수식이 X박스로 전락하는 것은 순식간이지요. 그래서 저는 수식도 텍스트로 따라다니기를 원했습니다.
그런데...
x = { -b +- root(b^2-4ac) } / 2a
이래 입력하면 책에서 보던 것과 많이 다르기때문에 많이 불편.
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
이래 되면 보기 편하겠죠? ^^ 모바일페이지에서 보면 입력했던 코드가 그대로 노출되어 보기 불편한데, PC페이지에서는 깔끔하게 보일겁니다.
사실 티스토리 블로그 에디터의 수식입력기는 Tex 문법을 이용해서 수식을 입력받고, 결과물만 이미지로 바꿔줍니다. Latex는 HTML같은 일종의 언어에요. HTML은 웹페이지를 표현하기 위한 규칙이고 Latex는 텍스트를 조판(인쇄하기 좋게 정렬하는 작업)하기 위한 규칙인데, LaTex에는 수식을 책에서 보는 것처럼 표현하는 방식이 정의되어 있습니다(HTML에는 없음!). 그래서 웹페이지에서 Latex 혹은 Tex 수식을 표현할 수 있는 스크립트를 돌려서 인터넷에서도 수식을 볼 수 있도록 하자... 는 것이 MathJax 스크립트 제작단체의 의도입니다.
제가 넣은 코드를 소개하기 전에, MathJax 라는 단체가 궁금하신 분들을 위해 관련정보를 살짝 공개하겠습니다.
▶ 홈페이지 : http://www.mathjax.org/
▶ MathJax 설명서 : http://docs.mathjax.org/en/latest/start.html#mathjax-cdn
위 설명을 뿌리로 잡고, 다른 블로거 분들께서 삽입하신 코드를 참고하여 Standard한 느낌의 코드를 만들어 봤습니다.
-----------------------------
<!-- LaTeX 수식 출력용 코드. 이제부터 달러 표기는 ￦＄로 해야 블로그에 ＄로 노출됨 -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['＄','＄'],['\\(','\\)']], processEscapes: true },
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
-----------------------------
위의 코드는 화면에 표시되는 ＄와 ￦를 같은 디자인의 다른 유니코드문자로 대체한 것입니다. 위 코드를 복사해서 가져가시는 분들께서는
＄와 ￦를 키보드에 있는 원래의 키로 바꿔 넣어주세요.
이 작업이 귀찮은 분들께서는 아래의 텍스트파일을 받아 활용해 주세요.
▲ 광고 5초 있습니다.
라텍스/텍스는 표현명령어(기호) 속에 수식을 가두어야 구현됩니다.
Latex는 ￦(수식￦) 과 ￦[수식￦] 의 두가지 명령어가 있고, Tex는 ＄＄수식＄＄ 이라는 한가지 명령어만 있습니다. 푸르게 표시한 명령어가 같은 결과를 출력하는데, ￦(수식￦) 과 같은 결과를 ＄수식＄의 명령어로도 구현되도록 추가된 것이 위 구문입니다. 하나의 스트링기호만 써도 수식이 표현되므로 편리하다는 장점이 있지만, 달러표기를 자주 하는 상황에서는 두 달러표시 사이의 텍스트를 수식으로 인식하는 문제가 있습니다. 그래서 이 구문을 넣었을 때에는 달러 표기를 ￦＄로 해야 ＄로 출력됩니다.
② "HTML-CSS": { availableFonts: ["TeX"] }
수식을 약간 굵게 바꿔주는 구문입니다. 가독성을 위한 설정으로, 필요없으면 빼도 무방합니다.
③ <script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
기능구현을 하는 핵심 코드입니다. 반드시 삽입되어야 합니다. 제작단체에서는 제공하는 변환과정을 중간에 가로채는 나쁜 놈들이 생길 가능성이 있다고... https 로 보안연결을 부탁하고 있습니다. 내 블로그에 뿌려지는 코드가 후킹되어 엉뚱하게 뿌려져도 상관없다면 http를 써도 됩니다.
이 코드를...
티스토리 관리자 페이지의 HTML/CSS편집 메뉴의 skin.html 란에서
<head> 태그를 찾은 뒤 </head>로 태그가 끝나기 전의 아무 곳에 넣고 저장하면 됩니다.
<body> </body> 안에 넣어도 된다는데, 제작사에서는 <head> 태그에 넣는 것을 추천하고 있습니다.
끝.
이제 수식을 한 번 입력해 볼까요?
\$\$x = {-b \pm \sqrt{b^2-4ac} \over 2a}\$\$
↓↓↓↓
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
정상적으로 출력되는 것을 확인하실 수 있을겁니다. 글씨크기 지정 서식 등도 잘 될테고...
▶ HTML 환경에서 Tex/LaTex 구문 입력시 주의사항(중요!)
http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-in-html-documents
▲ 수식 출력이 잘 안되면 한번쯤 읽어보세요. 추천합니다.
그런데, 그 많은 Tex 수식 코드를 다 외워야 하냐고요? 꼭 그럴 필요도 없는 게,
위에서 지속적으로 언급했듯이 블로그에디터의 수식입력기를 동원해서 Tex코드를 생성해도 되고,
http://www.codecogs.com/eqnedit.php
이런 온라인 LaTex 수식코드 구현사이트를 이용해도 되고,
이미 해외포럼이나 국내학회에서 꾸준히 이용되고 있는 오프라인 Tex 에디터를 이용해도 됩니다.
구현된 코드는 ＄수식＄ , ＄＄수식＄＄ , ￦(수식￦) , ￦[수식￦] 안에 적절히 가두어 블로그에디터에 붙여넣으면 됩니다. 같은 색깔로 표시한 감옥(?)은 같은 결과물을 출력합니다.
댓글에서도 수식 표현이 가능하며, 댓글 입력 후에는 페이지를 새로고침해야 정상적으로 출력될 것입니다.
※ 2019. 11. 22. 추가
http://docs.mathjax.org/en/latest/web/start.html#ways-of-accessing-mathjax
▲ 공식 문서 주소 변경 & 스크립트 불러오는 CDN 주소 변경(버전 3.X 기준)
http://docs.mathjax.org/en/latest/web/start.html#configuring-mathjax
▲ MathJax 3.0부터는 환경설정 스크립트 구성 방식도 변경되었음. 처음부터 다시 세팅해야 함.
※ MathJax 2.7 버전 문서 주소
http://docs.mathjax.org/en/v2.7-latest/start.html#using-a-content-delivery-network-cdn
퍼센트(%) 표시 : \% 이렇게 적으면 됨.
'블로그 관리법' 카테고리의 다른 글
| 네이버블로그 경유자의 비매너 : 악의적인 트래픽 공격 (0) | 2015.04.25 |
|---|---|
| 1개월 1포스팅만으로 1일 방문객 1000명은 그대로 유지될까? (6) | 2015.02.02 |
| 애드센스 성과 : 5년 달성 (0) | 2014.12.28 |