공학적인 내용을 작성하기 위해서 수식을 넣어주어야 하는 경우가 있다. 하지만 티스토리에는 수식을 생성해주는 도구가 없다. 이를 해결하기 위한 방법이다.
MathJax
MathJax
Beautiful math in all browsers.
www.mathjax.org
문서에 수식을 작성하기 위해 LaTex문법을 사용하는 것을 종종 봤을 것이다. 이와 함께 MathML, ASCIIMathML 문법을 웹페이지에서 렌더링 하기 위한 JavaScript 라이브러리가 바로 MathJax이다.
설정
티스토리는 고맙게도 HTML 코드를 편집가능하도록 열어둔 플랫폼이다. 이를 통해서 MathJax script를 연결해주려고 한다.
티스토리에서 MathJax 사용하기
- 티스토리 '블로그 관리'
- 좌측 '꾸미기' 탭 > '스킨 편집'
- 'html 편집'
<head>태그 속<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>
- '적용'
모바일에서도 표시하기
티스토리는 기본적으로 제공하는 스킨이 반응형 웹페이지로 제작되어 있기에 모바일 화면에 대응이 가능하다. 하지만 기본으로 https://~. tistory.com/m처럼 뒤에 /m을 붙여서 모바일 페이지가 따로 보이도록 설정이 되어있다. 아마도 사용자가 부가적으로 넣어둔 JavaScript 기능들을 모바일에서 로딩하지 않음으로써 더욱 빠르고, 데이터 혹은 자원을 덜 소모하기 위한 방안으로 보인다. 이에 단점은 내가 방금 HTML에 추가한 script가 이 모바일 페이지에서 로딩되지 않는다는 점이다. 그래서 우리는 이 기능을 사용하지 않을 것이다.
- 티스토리 '블로그 관리'
- 좌측 '꾸미기' 탭 > '모바일'
- '모바일 꾸미기 설정'의 티스토리 모바일 웹 자동 연결을 '사용하지 않습니다.'
- '변경사항 저장'
이로써 MathJax를 사용하기 위한 준비는 모두 끝났다.
기본 사용법
일반 수식
일반적인 사용으로는 '\$\$'로 앞뒤를 감싸준다.
\$\$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\$\$
$$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$
문장 속 수식
아래와 같이 '\('와 '\)'로 감싸주면 수식으로 인식한다.
we have \\(x_1 = 132\\) and \\(x_2 = 370\\) and so...
we have \(x_1 = 132\) and \(x_2 = 370\) and so...
댓글