티스토리 수식 입력 (MathJax)

수식을 꽤 헤비하게 쓰는 편이라 수식입력 관련해서 많이 알아봤는데 정말 시행착오를 많이 겪었다. (사실 고집 때문이긴한데)

 

일단 결론부터 이야기하자면,

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

 

이 수식 두 줄을

1. 스킨편집 → HTML 편집 →tag 내에 삽입
2. 서식관리 → 서식 쓰기 → HTML 모드 → 위 코드 작성 후 저장 → 수식을 사용한 모든 글에 해당 서식 삽입

---

시행착오

일단 리서치해본 결과 1번의 형태로 해결법을 많이 찾을 수 있었다. 형태는 다양하고 코드도 조금씩 달랐는데, MathJax documentation도 보면서 이렇게 넣어보고 저렇게 넣어보고 해봤는데 해당 코드로 최종적으로 확정지었다.

 

다만, 1번 형태로 head tag에만 삽입해줄 경우 모바일에서 수식 렌더링이 되지 않는 문제가 발생한다. 2번은 모바일에서도 수식 렌더링을 시켜주기 위한 목적으로 찾은 결과물이다. 마찬가지로 여러 코드를 넣어보고 빼면서 시행착오를 거쳤다.

---

주의사항

달러기호로 수식을 나타내다보니 달러기호($)를 표시할 때, 한 줄에 여러 개의 달러기호가 들어가있으면 해당 달러기호 사이의 모든 텍스트를 수식으로 잡아버릴 수 있다. (예전에 겪어봐서 나는 따로 조치를 취했다)

 

그래서 모든 달러기호 작성시에는 달러기호 사이에 역슬래쉬(\)와 $를 붙인 형태로 작성하면 해당 문제를 피할 수 있다. 위 수식의 뜻은, LaTeX 수식입력 모드 상에서 달러 기호를 표시하는 방법이다.

 

물론 backslash(\)와 괄호의 조합으로 해도 되지만, 노션에서 글을 싹 복사해서 붙이는 형태로 플로우를 구축해둔 나로서는 블로그 포스팅을 할 때 반복적인 처리를 해주기 싫었다.

 

아무튼 필요한 분들에게 도움이 되길 바라며

Photo by Jeswin Thomas on Unsplash