MathJax

2019. 5. 27. 17:52

그간 웹에서 수식을 어떻게 써야 하는지를 물어보시는 분이 많아서 수식을 쓰는 방법 중 꽤 많이 보이는 방법인 MathJax에 대해 정리해 보았습니다. 제가 전문 프로그래머가 아니라 오류가 있을 수 있고, 어떤 내용은 왜 그렇게 해야 하는지 설명할 수 없습니다. 댓글로 지적 바랍니다.

웹상에서 수식을 쓰는 방법은 직접 mathml이라는 형식의 코드를 하드코딩 하는 방법과 수식을 그림으로 캡처해서 그림형식으로 삽입하는 방법, 그리고 여기서 소개하는 MathJax처럼 자바스크립트를 사용해서 TeX문법으로 수식을 적용하는 방법이 있습니다.

수식을 작성을 지원하는 자바스크립트는 예전에는 여러 실험 프로젝트가 있었지만 현재 개발이 꾸준히 이루어지고 있는 프로젝트는 MathJax와 KaTeX정도인 것 같습니다. MathJax는 TeX으로 작성된 문서에 최소한의 수정을 거쳐 웹문서로 만드는 것을 목표로 출발했던 프로젝트라서 정말 복잡한 여러 수식을 다 표현할 수 있습니다만, 동일한 수식인 경우 KaTeX이 보여주는 반응이 훨씬 빠릅니다. 반면, KaTeX은 표현할 수 있는 수식에 한계가 있습니다.

우리가 사용하는 프로그램들 중에 MathJax를 사용해서 수식을 보여주는 프로그램들도 많습니다. Typora와 같은 Markdown 에디터들은 대부분 MathJax를 사용하고 있습니다. 반면, CindyJS와 같이 속도가 중요한 툴에서는 KaTeX을 쓰는 것으로 확인됩니다. KaTeX에 대해서는 기회가 되면 나중에 설명하기로 하고, 여기서는 MathJax에 대해 설명합니다. 이 블로그도 MathJax를 이용해서 운영됩니다.

사용환경

직접설치

개인적으로 제작하는 프로그램에 MathJax를 사용하고싶거나, 개인적으로 운영하는 서버에서 MathJax를 사용하고싶다면 직접 MathJax를 다운받아 적당한 폴더를 만들고 사용할 수 있습니다. 파일들은 MathJax GitHub page에서 얻거나 여기에서 빌드한 파일을 다운받아서 사용할 수 있습니다. 사용법은 아래에서 설명하는 cdn을 이용한 방법과 동일하므로 아래 사용법을 참고하세요.

CDN을 이용하는 방법

웹페이지의 <head>와 </head> 태그 사이에 다음 내용을 입력하면 TeX 문법으로 작성된 수식을 브라우저에 띄울 수 있습니다.

<script type="text/javascript" async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/latest.js?config=TeX-AMS-MML_HTMLorMML">
</script>

혹시 예전에 cdn.mathjax.org를 이용해서 MathJax를 운영하시던 분들이 이 글을 읽고 계시다면 위 코드에 보이는 주소로 바꾸시길 바랍니다. cdn.mathjax.org의 지원은 공식적으로 끝이 났고, 당장 연결이 끊어지더라도 이상하지 않은 상황입니다.

블로그에서 수식입력

개인서버를 이용한다면 이런 고민을 하지 않겠지만, 대부분 블로그 서비스를 활용해서 블로그 운영을 합니다. 이런 경우, 블로그 자체 서비스에 MathJax가 포함되어 있지 않다면 MathJax를 이용하기가 쉽지 않습니다. 최소한 위 CDN을 이용하는 법에서 소개한 코드를 입력할 수 있는 곳에서만 MathJax를 사용할 수 있습니다. 이런 서비스는 국내 서비스로는 티스토리밖에 없는 것 같습니다. (아닐 수도 있습니다.) 그래서, 티스토리에서 적용할 방법을 설명합니다.

티스토리에 회원가입을 하고 로그인하면 다음과 같은 화면이 나옵니다.

화면을 내려서 다음 그림에 표시된 “스킨편집”메뉴를 누릅니다.

그러면 새 탭이 열리면서 다음과 같은 화면이 나옵니다.

위 그림에 표시된대로 “html 편집”버튼을 누릅니다. 그러면 화면 오른편이 다음과 같이 편집창으로 바뀝니다. 여기에다가 위에서 설명한 코드를 입력하는데, 다음과 같이 나중에 찾기 편하도록 코드 화면에 나오는 첫번째 <script> 앞에 입력해 준 후 오른쪽 위의 “적용”버튼을 눌러줍니다.

그러고나면 모든 문서에서 수식을 사용할 수 있게 됩니다. 스킨편집창을 닫고 “글 관리” $\to$ “글쓰기”로 가서 나온 편집창에 간단히 다음 내용을 입력하고 미리보기를 하면 수식을 볼 수 있습니다.

\[ \frac a b \]

몇 가지 설정

달러기호

수학을 전공하지 않는 사람들은 화폐단위로 달러를 많이 사용할텐데, 이 이유로 MathJax는 기본설정으로 인라인 수식 입력에 달러 기호를 쓰지 않게 되어 있습니다. 달러 기호를 쓰려면 앞서 열었던 스킨편집 부분에서 입력한 코드 아래에 다음 코드도 입력합니다.

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
  });
</script>

수식 크기

예전에는 안그랬는데, 요즘에는 기본설정으로 보이는 수식의 크기가 한글 크기에 비해 좀 커보입니다. 이런 경우, 수식의 크기는 다음과 같이 조절합니다. (아래 코드의 4째 줄)

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
    "HTML-CSS": {scale: 90},
  });
</script>

긴 수식 자동줄바꿈

요즘은 웹사이트를 보는 기기가 다양해서 웹문서도 다양한 크기의 화면에 맞게 잘 바꿔져야 하는데, 이것을 위해서 수식도 자동줄바꿈이 되게 할 수 있습니다. 아래와 같이 바꿔줍니다.

 <script type="text/x-mathjax-config">
   MathJax.Hub.Config({
     tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
     "HTML-CSS": {scale: 90, linebreaks: { automatic: true } },
   });
 </script>

이것 외로 수식을 입력하는 TeX 문법을 알아야 합니다. 한글 텍 유저그룹인 ktug.org에 최신판 lshort-kr을 참고하시면 되겠습니다.

저작자표시 비영리 변경금지

다양한 수학세계