개발

티스토리 스킨 변경 후 $ 인라인 구분자 수식이 깨질 때 해결 방법

ai4man 2024. 2. 5. 04:40
반응형

1. 수식이 깨지는 이유

 

티스토리 스킨 변경 후 MathJax를 사용하여 LaTeX 수식을 웹 페이지에 표시할 때,

$$를 디스플레이 수식 구분자로, $를 인라인 수식 구분자로 사용하는 경우가 많다.

 

하지만 기본적으로 MathJax 3에서는 $$는 지원하지만, $는 인라인 수식 구분자로서 활성화되어 있지 않다.

 

이는 $가 웹 페이지에서 매우 흔하게 사용되기 때문에, 잘못된 수식 해석을 방지하기 위한 것이다.

 

때문에 $$ 구분자와 달리 $ 구분자를 사용하는 수식이 깨져서 보일 수 있다.

 

이런 이유로 인터넷에 알려진 해결 방법을 적용해도 $ 구분자를 이용하는 수식은 여전히 깨져보이는 것이다.

 

2. 해결 방법

 

아래 수식을 <head>와 </head> 사이에 넣어준다.

 

MathJax의 설정을 변경해 수식 구분자 처리 방식을 바꾼다. 추가로, 역슬래시 (\)를 인라인 수식 구분자로 사용할 수 있도록 한다.

<p data-ke-size="size16">
    <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.0.1/es5/tex-mml-chtml.js"></script>
</p>
<script>
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    },
    svg: {
      fontCache: 'global'
    }
  };
</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>

 

반응형