광고 차단 플러그인 해제 후 새로고침(F5) 하시면
컨텐츠를 정상적으로 볼 수 있습니다.
(Please turn off AdBlock Plug-in.)


p.s. 광고에도 여러분이 관심을 가질만한 정보가 녹아있을 수 있습니다.


온라인 공간에서 수식 표현은 골칫거리 중 하나입니다.

블로그 에디터(네이버/다음/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>

-----------------------------


위의 코드는 화면에 표시되는 $와 ₩를 같은 디자인의 다른 유니코드문자로 대체한 것입니다. 위 코드를 복사해서 가져가시는 분들께서는 $와 ₩를 키보드에 있는 원래의 키로 바꿔 넣어주세요.

이 작업이 귀찮은 분들께서는 아래의 텍스트파일을 받아 활용해 주세요.


MathJax-Jimnong.TXT

▲ 광고 5초 있습니다.



이 코드를...



티스토리 관리자 페이지의 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) 개   l   댓글 7

  • jjycjn (2016.03.18 05:36 신고)

    댓글에도 수식이 써진다니 신기하네요! $\text{$a$ and $b$}$ 와 $a \text{ and } b$

    • 짐농 (2016.03.19 01:21 신고)

      jjycjn // 반갑습니다. 대단한 블로그를 운영하고 계시네요. 존경스럽습니다. 멋진 분을 알게 되어 영광이네요. ^^

      댓글에도 자바스크립트가 영향을 미치므로 본문처럼 수식 표현이 가능합니다.

    • jjycjn (2016.03.21 10:57 신고)

      제 블로그에는 댓글을 펼쳐 놓기를 안해 두어서 댓글에는 수식입력이 안되는 줄 알고 있었습니다. ㅠㅜ 덕분에 하나 배워 갑니다. 감사합니다!

  • WelsperK (2018.11.17 00:11 신고)

    안녕하세요. 티스토리에 수식 입력 때문에 참고해서 사용했는데 PC로는 잘 출력이 되는데 모바일 화면에서는 Tex문자만 출력이 되더라고요. 혹시 해결하는 방법 아시나요??

    • 짐농 (2018.11.17 10:06 신고)

      WelsperK // 코드 보시면 아시겠지만... 자바스크립트입니다. 자바스크립트를 (전부든 일부든) 제한하는 애드블럭, 웹브라우저, 모바일 전용 페이지(예: https://jimnong.tistory.com/m)는 자바스크립트 표현을 방해할 수 있습니다.
      저는 안드로이드폰+모바일크롬+티스토리 반응형스킨 기준으로 현재 글에서 mathjax 스크립트가 잘 작동합니다.

    • WelsperK (2018.11.17 10:12 신고)

      아.. 제가 컴언어는 잘 몰라서.. 그냥 수식쓰는데 활용만 했는데 저는 모바일에서는 잘 작동을 안하네요.. 말씀하신걸로는 다음애드핏 광고 달아놓은거랑 충돌일 가능성이 있어보인다고 생각되네요..

    • WelsperK (2018.11.17 10:24 신고)

      답변 감사드립니다!!

★ 댓글, 작은 정보지만 다른 분들께 큰 도움이 됩니다. ★