블로그 수식 입력, mathjax 모바일 깨짐 해결방법
-------
2023.12.28. 내용추가
티스토리 블로그 설정 내
[ 꾸미기 > 스킨편집 > HTML] 에서
<head> ... </head> 부분을 찾고, 해당 head 테그 사이에
아래의 script 테그를 추가해주시면 수식 깨짐 문제가 해결됩니다.
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script> MathJax = { tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]} }; </script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
출처 : https://faceyourfear.tistory.com/76
---------
2017.06.30. 내용
이제 막 블로그를 시작한 초보로서, 방금 큰 고비 하나를 넘겼습니다.
바로 모바일에서 mathjax 수식이 깨지는 현상을 해결한 것입니다.
결론부터 말하면, 티스토리에 모바일 웹을 off 해놓지 않아 생긴 문제입니다. 모바일 웹이 적용될 경우 스크립트가 제대로 적용되지 않아 수식이 깨진 겁니다. PC에서는 수식이 제대로 표현되는데, 모바일 기기에서만 문제가 생긴다면 스크립트가 충돌한 것이 없는지 한번쯤 확인해보시길 바랍니다.
필자와 같이 html이나 css에 대해 잘 모르는 분들을 위해 블로그에 mathjax를 적용하는 방법과 모바일웹을 해제하는 방법에 대해 글을 씁니다.
1. 티스토리 블로그 수식 입력
[관리] -> [ HTML / CSS 편집 ] -> [html] 설졍에서 <head>와 </head> 사이에 아래의 코드를 붙여넣습니다.
이 방법은 블로그 내에 latex 코드를 입력하면 mathjax를 통해 수식으로 읽어오는 것입니다.
<!-- LaTeX 수식 출력용 코드. 이제부터 달러 표기는 \$로 해야 블로그에 노출됨 -->
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
MathJax.Hub.Config({
extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
2. 모바일 웹 해제
[관리] -> [스킨] -> [모바일] -> [모바일웹 off]
개인적인 생각에 모바일 웹을 사용하면, 티스토리가 페이지를 모바일 웹으로 변환하는 과정에서 mathjax 스크립트와 충돌하는 것 같습니다.
'기타' 카테고리의 다른 글
스캔 어플 : 오피스 렌즈 (0) | 2017.07.09 |
---|