[MathJAX] MathJAX 설정법 / 플러그인 충돌 해결

MathJax설정법 / 플러그인 충돌 해결

  이것은 FastBoot 뿐만 아니라 유사한 구문이 있는 CSS를 사용하는 스킨이라면 모두 해당되는 문제인 것 같습니다. 그래서 카테고리를 Tistory로 올리지만, FastBoot을 사용하시는 분들에게도 여전히 유효한 수정 방법입니다.

  MathJax에 대해서 간단히 소개해드리자면, 웹상에서 쉽게 수식을 넣지 못하는데(물론 티스토리는 자체 입력도구를 가지고 있긴 하지만 한번 입력하면 수정하기가 용이하지 않고 입력도 편하지는 않다고 봅니다) 이것을 해결해주는 플러그인입니다.

  사이트 주소는

http://www.mathjax.org/demos/tex-samples/

  위 사이트 들어가보시면 어떤 플러그인인지 대충 감이 오실거라고 봅니다.

  이 플러그인을 사용하려면 아래처럼 head에다가 CDN을 사용하여 쉽게 사용할 수 있는 방법이 있습니다.

	
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [['$*$','$*$']]}
  });
</script>
<script src="http://cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 
	

 위에서 저는 $*$와 $*$사이에 있는 식을 MathJax가 해석하여 수식을 출력하게 하라고 한 것입니다. 블로그 특성상 특수문자가 많이 있는 편이라서, 웬만하면 오작동하지 않도록 하기 위한 조치입니다.

  여기서 이제 설치를 한 후에 아래처럼 수식이 깨져 보이시는 분들이 있을 것입니다.

  바로 위 사진처럼 Loading web-font TeX/Math/Italic 이라는 메시지가 한참 떠있다가 수식이 깨지는 현상인데요, 이를 해결하기 위해서는 style.css의 수정이 필요합니다. 다른 스킨이라면 font-family에 붙는 !important가 있는 부분을 찾아보세요.

  FastBoot의 경우에는 style.css의 상단 부분에 다음과 같은 곳이 있을 것입니다.

	
div,dt,ul,ol,li,h1,h2,h3,h5,h6,pre,code,form,fieldset,legend,textarea,blockquote,th,td,input,select,textarea,button,img,dl,li {
  margin:0;
  padding:0;
  border:0;
  line-height:1.5;
  font-family:Arial, "돋움", Dotum, AppleGothic, sans-serif !important;
} 
	

  단순하게 FastBoot스킨 같은 경우에는 font-family부분의 끝에있는 !important 부분을 삭제하시면 해결이 됩니다.

  아래는 해결된 모습입니다.

  도움 되셨길 바라면서 포스팅 마칩니다. ^^