티스토리 글에서 수식을 입력하기 위해 MathJax를 이용하면 편리하다. 자바스크립트 MathJax 모듈 내 코드는 LaTeX 문법을 수식으로 변환해준다. 예를 들어 `1 \lt 2` 를 $ 1 \lt 2 $ 로 보이게끔 바꿔준다.
이 MathJax를 적용하는 방법은 구글링을 통해 쉽게 찾을 수 있다. 그리고 대다수의 블로그는 티스토리의 스킨 HTML의 <head> 태그 안에 아래의 <script> 태그를 넣으면 된다고 간단히 설명한다.
<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>그러나, 이 방법은 나에게 동작하지 않았다. 정확히는 매번 화면에 진입할때마다 수식이 제대로 보이기도 했고, 안 보이기도 했다. 그 이유는 티스토리가 글을 로딩하는 시점과 MathJax 모듈을 로딩하는 시점의 차이 때문으로 분석된다.
1. 티스토리 글이 MathJax 모듈보다 먼저 로딩(실행)될 경우
- 티스토리 글 로딩 -> 로딩된 티스토리 글이 DOM에 삽입 -> MathJax 모듈 로딩 -> MathJax의 DOM 내 수식 변환 로직 구동 -> 정상적으로 수식들이 보임
2. 티스토리 글보다 MathJax 모듈이 나중에 로딩(실행될 경우)
- MathJax 수식 변환 로직 구동 -> DOM 내의 모든 수식 변환 완료(?) -> 티스토리 글 로딩 -> 티스토리 글 내에 LaTeX 구문이 변환되지 않은채로 그대로 남게됨
실제로, MathJax 문서에서는 동적인 컨텐츠를 포함한 페이지의 경우 별도의 셋팅이 필요함을 설명하고 있다. 이 문서에 의하면 수식 변환은 MathJax.typeset() 혹은 MathJax.typesetPromise() 함수를 호출하면 이루어진다고 한다. 그래서 나는 티스토리 글과 MathJax 모듈이 DOM에 모두 준비된 후에, typeset 함수를 실행해주면 되는것이었다. 그렇다면, 이것을 어떻게 구현할 수 있을까?
티스토리는 [## title ##] 처럼 앞뒤가 이상한 괄호로 둘러쌓인 치환자가 포함된 HTML을 제공하면, 그것을 블로그 스킨으로 사용할 수 있도록 지원한다. 이 HTML 코드는 티스토리의 어드민 화면에서 직접 수정할 수 있는데, 여기에는 많은 문제점이 뒤따른다. 이 문제점들을 해소할 수 있는 pronist/tidory라는 오픈소스 프레임워크가 있으며, 이 프레임워크로 개발된 pronist/hello 스킨의 fork을 내 블로그는 2025년 현재 사용중이다.
다행히도, 이 코드베이스에는 글의 로딩이 완료된 시점에 호출되는 이벤트리스너(alpine:init)의 코드가 이미 있었다. 그래서 티스토리 글의 로딩이 완료된 시점을 파악하는 것은 매우 쉬웠다. 또, MathJax는 <script> 태그를 통해 호출되기에, 이 태그의 onload 를 이용하면, MathJax 모듈 로딩이 완료된 시점도 알 수 있었다.
해당 작업 커밋의 링크를 공유하고, 글을 마친다.
'일상이야기' 카테고리의 다른 글
| 구직까지 6개월, 무엇을 해야 할까? (0) | 2025.12.22 |
|---|---|
| 취미로 백준을 풀어보려는 사람에게 (0) | 2025.07.28 |
| 윈도우 PC와 맥북을 듀얼모니터로 함께 사용하던 책상 근황 (0) | 2025.05.20 |
| 구글 검색시, 티스토리 블로그 나만의 파비콘 노출시키기 (3) | 2023.10.19 |
| 윈도우 PC와 맥북을 듀얼모니터로 함께 사용하기 (17) | 2023.09.09 |