[js] MathJax - 자바스크립트 수식 입력 라이브러리

MathJax

MathJax는 TeX 에서 쓰는 수식기호를 그대로 가져와, 브라우저에서도 쓸 수 있게 해주는 자바스크립트 라이브러리다.
티스토리에 이 라이브러리를 적용하면 손쉽게 수식을 입력할 수 있다.

적용하는법

스킨 편집 -> html 편집 -> HTML

아래 코드 추가

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

js파일을 다운받아 티스토리에 아래와 같이 직접 적용하려 하면, 폰트가 다르게 나온다.

<script id="MathJax-script" async src="./images/tex-mml-chtml.js"></script>

문서에서는 이를 same origin policy 때문이라고 설명하는 것 같다.
아파치 웹서버일 경우 해볼 수 있는 부분이 있는걸로 보이는데, ...
티스토리에서는 어떻게 할 수 있을지 모르겠다.

Typically, you want to have MathJax installed on the same server as your web pages that use MathJax. There are times, however, when that may be impractical, or when you want to use a MathJax installation at a different site. For example, a departmental server at www.math.yourcollege.edu might like to use a college-wide installation at www.yourcollege.edu rather than installing a separate copy on the departmental machine. MathJax can certainly be loaded from another server, but there is one important caveat — The same-origin security policy for cross-domain scripting.
Some browsers’ (e.g., Firefox’s) interpretation of the same-origin policy is more strict than most other browsers, and it affects how fonts are loaded with the @font-face CSS directive. MathJax’s CommonHTML output modes use this directive to load web-based math fonts into a page when the user doesn’t have them installed locally on their own computer. These browsers’ security policies, however, only allow this when the fonts come from the same server as the web page itself, so if you load MathJax (and hence its web fonts) from a different server, they won’t be able to access those web fonts. In this case, MathJax’s CommonHTML output mode will not show the correct fonts.
There is a solution to this, however, if you manage the server where MathJax is installed, and if that server is running the Apache web software. In the remote server’s MathJax folder, create a file called .htaccess that contains the following lines:

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Basic Usage

Inline

글 사이에 인라인으로 \( a^x \) 이런 수식을 넣는 방법이다.

글 사이에 인라인으로 \( a^x \) 이런 수식을 넣는 방법이다.

Block

얘는 아예 한줄을 따로 먹는 $$ a^x $$ 수식 입력방법이다.

얘는 아예 한줄을 따로 먹는 $$ a^x $$ 수식 입력방법이다.

etc

Tip) bmatrix 행렬을 입력할 때 주의점
엔터로 줄을 넘기면 작동하지 않고,
Shift + Enter로 하거나, 줄바꿈을 하지 않아야 한다

+모바일 웹에서는 작동하지 않는다...