Challenges/티스토리

[티스토리] Tistory Latex수식 적용하기(모바일 지원, 정렬)

뚱요 2021. 12. 5. 15:27
반응형



기존 Tistory의 에디터가 바뀌면서 기존의 수식 편집기가 사라졌다. 이제는 Latex를 이용해서 수식을 넣으려면 html에 스크립트로 넣어야한다.
Latex를 모든 브라우저에서 수식을 표현하기 위해서는 MathJax에서 사용하는 JS 라이브러리 사용해서 문제를 해결하려 한다.
https://www.mathjax.org/

MathJax

Beautiful math in all browsers.

www.mathjax.org

1. Tistory 관리 > 꾸미기>스킨 편집> html 편집으로 이동

2. 작성한 페이지 마다 코드를 붙여 넣는 것이다.

<head> 태그 내에 하단의 코드를 붙여 넣는다.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>

3. 하단의 코드를 글 작성시 HTML 모드에서 붙여 넣는다.(모바일 최적화)

이 단계를 끝내야 모바일에서도 깨지지 않는다.
MathJax (현재 기준 최신 버전) version 3 코드를 입력해준다.
참고 링크: https://www.mathjax.org/#gettingstarted

<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>
HTML모드

HTML모드에서 다시 기본모드로 변경하면 하단과 같이 스크립트가 추가되어 있다.

기본모드

4. 수식을 사용하기 위해서는 작성한 글에 문법에 맞추어 넣어 사용

4.1 문장 사이 삽입 가능

글과 수식을 한 줄에 쓰기 위해서는 \( 사용
식 \( y=ax\) 는 일차 함수의 한 형태이다.

식 \( y=ax\) 는 일차 함수의 한 형태이다.

4.2 문장 사이 삽입 불가

수식만 한 줄에 사용하기 위해서는 \[ , $$ 사용
가운데 정렬

식 \[ y=ax\] 는 일차 함수의 한 형태이다.

식 \[ y=ax\] 는 일차 함수의 한 형태이다.

식 $$y=ax$$ 는 일차 함수의 한 형태이다.

식 $$y=ax$$ 는 일차 함수의 한 형태이다.



모바일 환경에서도 장 적용됬다!


참고로 Latex문법이 익숙하지 않다면 해당 사이트에서 확인 가능하다.
https://latex.codecogs.com/eqneditor/editor.php

Online LaTeX Equation Editor - create, integrate and download

latex.codecogs.com

Latex Editor

반응형