티스토리 수학 기호 사용하기

Captain BIN
2020. 12. 16. 02:18

LaTex? MathJax? KaTeX? 선택?

앞으로 포스팅을 하면서 수학 기호를 작성할 것 같은 예감이 물씬 풍겨와 티스토리에 어떻게 하면 수학 공식을 넣을 수 있을지 웹 서핑을 해보았습니다. 거의 대부분의 글을 읽어 보니 LaTex와 MathJax를 언급하면서 자바 스크립트를 추가하여 설정하고 수학 기호를 출력해 주는 포스팅 글이 많았습니다.

수학 기호를 나타내는 방식도 비슷해 보이나 조금씩 달라 보였습니다. 그래서 좀 더 깔끔하게 표기되고 쓰기 편한 것이 무엇이 있을까? 하고 여러 글들을 보면서 종류를 정리를 하다 보니 무언가 이상 하다는 생각이 들었습니다.

그래서 위키 피디아에서 MathJax에 대해 우선 찾아보았습니다. (링크 : ko.wikipedia.org/wiki/MathJax)

그리고 LaTex에 대해서 찾아보았습니다. (링크 : ko.wikipedia.org/wiki/LaTeX)

이 글들을 참조하면 수학 기호를 표시하기 위해 Tex가 개발되었고 이것을 좀 더 편하게 사용하기 위해 LaTex 매크로가 생겼으며 이 LaTex 매크로를 웹 브라우저에서 마크 업으로 표현하기 위해 JavaScript 라이브러리로 탄생한 것이 바로 MathJax라는 것을 알게 되었습니다.

그리고 많이 눈에 뜨이지 않는 Khan Academy에서 제공하고 있는 라이브러리 KaTeX도 있다는 것을 알게 되었습니다. (링크 : katex.org) KaTeX 공식 사이트에 들어가 보면 메인 화면에 MathJax 보다 빠르다는 것을 장점으로 내세우고 있었습니다. 중간 부분에는 수학 공식 위주로 되어 있는 문서의 로딩 속도를 보여주는 짤도 보입니다. KaTeX가 좀 더 빨리 로딩되는 것을 보고 '오~! 이걸로 해야겠다'라고 마음먹었다가 서버 사이드 랜더링이 지원된다는 글을 보고 그냥 MathJax를 적용하기로 했습니다. 서버 사이드 랜더링이 서버가 여유롭다면 빠르게 보이겠지만 사용자가 몰리고 서버에 과부하가 생긴다면 과연 그때는 어느 것이 더 빠를까요?

그러므로 웹 상에서 수학 공식을 표현하기 위해서는 무엇을 사용할지 고민할 필요도 없이 그냥 MathJax를 사용하면 됩니다. 지금까지 이 글을 쓰기 전까지 허비한 시간을 생각하면 눈물이 납니다. 부디 이 글을 보시는 분들은 시간 절약하세요.

참고로 이 글은 2020.12.16에 작성되었습니다. 이후 좀 더 좋은 방식이 있다면 그것을 선택하시면 됩니다.

만약 이 글로 시간 절약이 되셨다 느껴지신다면 위에나 옆에 혹은 밑에 보이는 그림들을... 쿨럭!! 앗... 기침이...!!!

죄송합니다. ^.^;;;

MathJax 설정하기

티스토리 블로그에 수학공식을 표현하는데 적용할 MathJax의 공식 사이트는 다음 링크와 같습니다.

(MathJax 공식 사이트 : www.mathjax.org )

이 공식 사이트에서 제공하는 설치 방법대로 설치하시면 됩니다. 저는 적용하기에 앞서 $기호가 순수 $ 기호라면 어떻게 될지 궁금증이 앞서 우선적으로 제가 티스토리 스킨 작업을 하는 티스토리 계정에 MathJax를 적용하여 어떻게 결과가 나타나는지 확인해 보았습니다.

MathJax 테스트

위 예시로 확인할 수 있는 사항은 MathJax가 파싱 하는 부분은 문단 부분으로 확인이 됩니다. 아무래도 코드 블록 부분에는 $가 많이 사용되어 MathJax의 $를 다른 기호로 바꿔야 하는지 고민을 했었지만 결과를 보고 그냥 사용해도 좋겠다는 판단이 들었습니다.

그리고 MathJax의 시작과 끝 구문이 위의 예시처럼 하나의 문단 태그 안에 들어있지 않다면 파싱을 하지 않는다는 사실도 알게 되었습니다.

그럼 이제 본격적으로 본 블로그인 CaptainBIN 에도 적용해 보겠습니다.

티스토리 MathJax 적용하기

MathJax를 가능하면 최신 버전을 사용하는 것이 좋을 것입니다. MathJax 공식 사이트에서 문서 중 "Getting Started with Components" 페이지를 확인하면 맨 처음에 나오는 최신 버전의 MathJax를 사용할 수 있는 스크립트가 제공됩니다. (링크 : docs.mathjax.org/en/latest/web/start.html )