본문 바로가기

Programming/파이썬 프로젝트, 팁

[팁] 티스토리(Tistory)에서 Latex 수식 사용하기(모바일도 지원되게)

반응형

tistory에서 Latex를 이용해서 수학 수식 표현이 가능하다. 

 

여러 가지 방법이 있는데, 현재(2021.3월)까지 내가 헤매면서 찾아낸 결론은, 각 페이지마다 아래 스크립트 문구를 넣는 것이 최고이다. 

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

넣는 방법은,

 

 1. '글쓰기'를 눌러 글을 하나 생성해서 편집하려는 상태라 가정.
 2. tstory 편집기에서 오른쪽 상단에 있는 '기본모드'로 되어 있는 모드 선택기를 눌러 'HTML"로 변경
 3. 위 두 줄짜리 스크립트를 복사해서, 자신이 지금 쓰는 글에다가 붙여넣기 함
 4. 그 다음은, 일반 Latex 수식 쓰듯이 쓰면 됨
    : 달러($)와 달러 사이, 혹은 더블 달러($$) 사이에 Latex 수식을 쓰면됨
    ex) $e^x$  : e의 x승이 표현됨
    

 


위 처럼 모든 페이지를 작성할 때마다 위 두 줄의 스크립트를 붙여 넣는 것이 귀찮을 수도 있는데, 방법을 못 찾겠다.

일반적으로 가이드되는 아래와 같은 방법은, PC 웹에서 볼 때는 잘되나, 모바일에서 볼 때는 수식 표현이 안된다. (된다고 하는데 나는 안된다.) 해서, 위처럼 귀찮지만 페이지마다 스크립트를 붙여 넣는다.

--> 여러 가지 스킨으로 바꿔도 보고, 별의별 방법을 해도 안된다. 나는 그냥 페이지마다 저 스크립트 붙여 넣기 하겠다. ㅠ

 

일반적으로 가이드되고 있는 방법은 아래와 같다.

 

1)자신의 tistory 관리 페이지로 가서
2)왼쪽 메뉴바에서 '꾸미기 - 스킨 편집' 선택
3) 오른쪽 상단부에 보면 'html편집'이라는 버튼이 보이는데, 이 버튼 클릭
4) 버튼 클릭에 의해서 html 코드가 쭈욱 보이는데, 여기서 <head> ~ </head>사이에 아래 코드 삽입
   </head> 바로 앞에 넣으면, 나중에 찾기 좋다. (<bocy>~</bocy>사이에 넣어도 된다.)
   
   
<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>


5) 오른쪽 위에 있는 '적용'버튼 눌러서 save
6) 왼쪽편 위에는 'PC'아이콘이 선택된 상태일텐데, '탭' 및 '모바일' 아이콘을 각각 누르고, 위 5번에서 눌렀던 '적용'버튼 클릭
    (이것을 해야하는지는 좀 헷갈린데, 이걸 해야함 모바일 적용이 된다고 하는 페이지들 있음.)
7) 현재의 '스킨 편집'페이지를 닫기한다.
8) 다시 자신의 tistory 관리 페이지에서 '꾸미기-모바일' 클릭
9) "티스토리 모바일웹 자동 연결을 '사용하지 않습니다'"가 되게 변경.(이미 그렇게되어 있으면 그냥 놔두고.)
    그리고나서, 화면의 오른쪽 하단부에 있는 '변경사항 저장'버튼 클릭

 


다시 얘기하지만, 나는 위 방법으로는 'PC 단 웹 페이지'에서는 수식이 잘 보이나, 모바일에서는 수식이 안 보인다. (그냥 Latex 수식 텍스트로만 보이고 수식으로 변환되지 않는다. ) 

 

해서, 위와 같이 전체 적용도 해놓고, 각 페이지마다 저 맨 위에 명기한 바와 같이 두 줄짜리 스크립트를 붙여 넣기 해서 사용하고 있다. 그렇게 하면 모바일에서도 다 잘된다. (즉, 전체에다 스크립트 적용하고, 거기다가 각 페이지 마다도 적용하고 해도 상관없다는 얘기)

 

나처럼, 2~3일 고민하지 말고, 그냥 각 페이지마다 스크립트 적는 게 편할 듯.

아니면, 누군가가 전체 적용할 수 있는 방안(모바일도 '진짜로'되면서) 찾아내서 알려주시면 고맙겠다...^^

 

-끝-

반응형