[Tex | MathJax] Tex 문법을 Tistory에서 호환성 있게 사용하기 (모바일, PC)
study/others

[Tex | MathJax] Tex 문법을 Tistory에서 호환성 있게 사용하기 (모바일, PC)

728x90

많은 블로그에서 $\LaTeX$ 에서 사용하는 Tex 문법을 적용하기 위해 MathJax를 사용한다. MathJax는 수식을 사용하는 Tex 문법을 웹 페이지에 렌더할 수 있도록 만든 JS 라이브러리이다.

y = ax

와 같은 수식을

$$y = ax$$

보기 좋게 렌더링해주는 역할을 한다.

 

0. TL;DR (요약)

아래 코드를 HTML <Head>에 넣으면 모바일 / PC 환경에 상관없이 잘 작동한다.

<script>
  MathJax = {
    loader: {
      load: ['input/tex-base', 'output/svg', 'ui/menu', '[tex]/require']
    },
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
  };
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

 

1. MathJax 3.0을 브라우저에 탑재하기

여러 블로그에서 MathJax 2.x버전을 소개하고 있다. 현재 MathJax가 지원하는 최신 버전은 3.0이다! 버전 2와는 많이 다른 configuration을 가지고 있다고 한다. 이 글에서는 최신 버전에 해당하는 MathJax를 설치하겠다. 영문 documentation이 익숙하다면, 여기에서 확인할 수 있다. (더 많은 설정 정보를 담고 있으니 확인하면 좋다!).

 

Tistory의 설정 안에 스킨편집 탭에 들어가면, 티스토리 스킨의 HTML / CSS를 설정할 수 있는 창이 나타난다. 이 곳에서 HTML 영역에 MathJax js 파일과 약간의 설정을 주입해주면 완료된다. 위 코드를 복사해서 <head> 아래에 붙여넣어준 뒤, 적용해주면 된다.

 

2. MathJax를 사용할 때의 문제점과 이를 해결하기

티스토리에서는 글을 작성할 때 의도치 않게 태그가 계속해서 붙는다. 보이는 것에는 변함이 없지만, HTML 내에서는 필요 없는 태그가 열렸다 닫혔다를 반복할 때가 있다. 그리고 Tex 문법 사이에 해당 코드가 들어가는 경우도 있어서, HTML 편집기로 Tex 문법의 처음부터 끝까지 중간에 태그가 끼워져있지 않은지 확인해줘야 할 필요가 있다..

 

이 경우에는 직접 HTML에 들어가서 제거해줘야 해결된다.

span을 끼우지 않아도 알아서 들어가 있다..

$$

y = ax

$$

라는 것을 렌더링했을 때에는 $y=ax$ 처럼 표현되기를 원하지만, 사실상 그렇지 않다. 줄바꿈 하나가 태그 하나를 차지하기 때문에, \$\$ \$\$ 사이에 태그로 인해 렌더링에 실패하게 되는 것이다(...)

렌더링에 실패하는 경우

마음 편하게 작성하고자 한다면, 다른 LaTex 시뮬레이터 사이트에서 표현하고자 하는 식을 적은 뒤에, HTML 편집기에다가 붙여넣는 것이 좋겠다.

렌더링에 성공하는 경우..

 

나머지 하나의 문제점은 모바일에서 올바르게 렌더링이 되지 않는 한계점이 있다. 이는 렌더링을 HTML / CSS로 해주는 것이 아니라 SVG로 해 주면 해결된다. 이를 위해 위 코드의 loader 부분의 output을 svg로 설정해 준 것이다.

개인적으로 렌더링하는 방법을 바꾸고 싶다면, (블로그 주인이 허락했다면_ MathJax의 설정에 따른다) 수식을 우클릭한 뒤 Math Renderer를 설정함으로써 바꿀 수 있다.

 

왼쪽이 CSS/HTML output, 오른쪽이 SVG output (모바일 환경)

 

추가적으로 Documentation을 확인하면서 유용한 정보를 추가해보겠다!

저작자표시

'study > others' 카테고리의 다른 글

Dependency Inversion Principle - 의존관계 역전 원칙에 대해서  (0) 2022.03.18
[파이썬 | Python] Mutable object, Immutable object  (0) 2022.01.23
[깃 | Git] Udacity Git Commit Message Style Guide - 깃 커밋 메시지 일관성있게 쓰기 (스타일 가이드)  (0) 2022.01.14
42서울 (42SEOUL) 온라인테스트 후기  (0) 2021.10.28

    티스토리툴바