MathJax 모바일 깨짐 해결방법

블로그에 포스팅할 때 수식을 입력하면서 미리 보기로 체크해가며 입력하는데 모바일 화면 미리 보기에서 수식 꺠짐 현상이 발생함.
근데 모바일 환경이 아닐 때는 MathJax로 LaTex 수식을 입력하면 잘만 나타났는데 모바일에서는 LaTex 수식이 그대로 보이는 문제가 발생했다.

그래서 해결하고자 구글링 후 여러 해결방안을 모두 시도해봄.

 

1. 모바일웹 자동 연결을 사용하지 않음으로 설정 (티스토리)

찾아본 결과 거의 모든 블로그에서 티스토리 같은 경우는 모바일 꾸미기 설정에서 티스토리 모바일웹 자동연결을 사용하지 않는다고 설정하면 해결된다고 한다.

 

결과: 안됨.

 

2. 블로그 html에 MathJax를 최신버전으로 사용하는 코드 추가

<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의 버전에 상관없이 최신 버전을 사용하는 코드

 

결과: 안됨.

 

3. 페이지마다 MathJax 스크립트 삽입

<script> MathJax = { tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]} }; </script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

글을 포스팅 할 때마다 html모드에서 맨 위에 스크립트를 넣어주는 방법이다.

스크립트를 글마다 적용해주니까 모바일에서도 잘 적용됨.

 

귀찮지만 확실한 방법.

 

결과: 잘 작동함.

 

 

[팁] 티스토리(Tistory)에서 Latex 수식 사용하기(모바일도 지원되게)

위 블로그를 참고했습니다.