티스토리 모바일 수식 깨짐? LaTeX 설정 한 줄로 끝내는 법

논문 리뷰 글을 작성하고 난 후, 수식이 PC버전에서는 잘 보이는데 모바일에서는 전부 깨져서 찾은 해결 방법..!

 

모바일 버전에서 수식 깨짐 해결 방법을 알려주는 대부분의 글에서는 

<p data-ke-size="size16">
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</p>

 

해당 html을 서식으로 만들어서 서식을 글에다 삽입하라고 나와있는데,

이 html을 써서 서식에 붙여넣으면 인라인 수식은 해결되지 않는 문제가 발생한다. 

 

그래서 찾아낸 다른 버전..!

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$']]  // $...$만 수식으로 해석
  }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

 

 글을 작성할때 inline은 $...$로, 블록 수식은 $$...$$로 해두었기 때문에 위와 같이 설정하여 HTML로 적용했다.

 

특히 \(...\) 같은 표현은 티스토리에서 일반 괄호와 혼동되어 본문 내 일반 텍스트까지 수식으로 처리되는 문제가 발생할 수 있으므로 아예 $만 사용하는 방식으로 통일하는 것이 좋다!