티스토리에서 MathJax가 동작하지 않을 때 해결방법

티스토리에서 MathJax 스크립트를 삽입했는데도 MathJax가 동작하지 않을 때 사용할 수 있는 방법을 소개하려고 한다.

 

기존에 사용하던 티스토리 기본 스킨을 hELLO 스킨으로 변경하고 난 다음에 멀쩡히 동작하던 MathJax가 동작하지 않기 시작했다. 구글링을 해도 마땅한 해결 방법을 찾지 못해, 온리 영어로 되어있어 최후의 보루로 남겨놓은 공식 문서를 열었는데 결국 그곳에서 힌트를 발견할 수 있었다.

 

방법 1. Lazy typesetting

"Lazy typesetting"은 페이지에 있는 수식들이 실제로 브라우저 뷰포트에 진입할 때까지 그 렌더링을 지연시키는 설정인데, 보는 순간 이거 된다라는 생각이 들었다. 자세한 내용은 공식 문서에서 읽을 수 있다.

 

방법 2. MathJax 강제로 한 번 더 실행

1번 설정을 해주고 나서 MathJax자 잘 동작해서 좋아했는데... 간헐적으로 MathJax가 동작하지 않을 때가 있었다. 또 다른 방법을 찾아야 한다는 생각에 슬픔이 차올랐지만 정신을 부여잡고 공식 문서를 다시 살펴보니 동적으로 추가된 콘텐츠들 대응하기 위한 typesetPromise 문서를 찾을 수 있었다. MathJax가 동작하지 않았을 때 콘솔창에 이 메서드를 직접 실행시키니 MathJax가 적용되는 것을 확인했다!!

 

그렇다면 언제 MathJax를 강제로 한 번 더 실행시키냐는 것인데... 정말 많은 고민 끝에 MathJax가 제공하는 라이프사이클 안에서 setTimeout을 이용해 다음 틱에 MathJax를 한 번 더 실행시키는 흑마법을 만들었다.

 

최종 코드

며칠간의 대삽질 끝에 만들어진 티스토리용 MathJax 코드는 다음과 같다. 이 코드를 HTML head 안에 살포시 넣어주자.

<script>
  window.MathJax = {
    loader: {load: ['ui/lazy']},
    startup: {
      pageReady: function () {
        setTimeout(function() {
          MathJax.typesetPromise();
        }, 0);
        
        return MathJax.startup.defaultPageReady();
      },
    },
  };
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

 

적용 결과는?!

 

\[x=\frac{-b\pm\sqrt{b^2 -4ac}}{2a}\]

 

성공이다!! 이후로도 테스트를 계속해봤는데 잘 되는 것 같다.(제발...)

 

아마도 티스토리 스킨을 변경하면서 블로그 콘텐츠 로딩 속도가 살짝 느려져서 MathJax가 도큐먼트를 파싱 하는 타이밍과 맞지 않아 발생한 문제로 보인다.

 

누군가에게는 이 글이 도움이 되길 바란다ㅎㅎ