블로그에서 수식을 써보자.

블로그 수식 적용

Project Euler를 풀다보니 수학 공부를 해야하는데, Markdown으로 수식 적는법을 몰라서 공부해보았다.

공식홈페이지에 따르면 다음과 같다.

Jekyll Blog의 post는 kramdown이라는 마크다운을 기본으로 사용한다.

Kramdown은 LaTeX를 지원하기 때문에 수식 블록에 MathJax를 사용해서 PNG렌더링이 가능하다. JavaSript나 CSS를 추가하면 바로 된다고 한다.

MathJax란?

HTML 문서에서 수학 수식을 표현할 수 있게 해주는 오픈소스 스크립트다.

장점

  1. 수식을 이쁘게 표현해줄 수 있다.
  2. 편리함 (이미지 업로드에 비해)

단점

  1. 화면 렌더링에 약간 지연이 있음
  2. 렌더링이 지원되지 않는 웹 브라우저가 존재함

블로그에 MathJax 적용하기

3가지 방법

jekyll 블로그를 공부하다보니 이런 스크립트 류의 추가는 3가지 방법이 있을 수 있을 것 같다.

  1. 포스트마다 script를 넣는다. html head : ~
  2. layout에서 글들의 가장 기본이 되는 default.html 또는 archive.html을 추가한다.
  3. include에서 따로 html을 만들어 liquid tag로 설정을 한다.

1은 너무 번거롭고, 2와 3을 고민하던 중 MathJax외의 방법으로 교체할 것을 대비하여 3번을 선택했다.

Setting

includes 폴더에 설정

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

layout에서 default.html 설정하기

이렇게 하면 파일에서 적용하고 싶을때, use_math : true로 설정하면된다.

{ % if page.use_math % }
  { % include mathjax_support % }
{ % endif % }

Example

$$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$
\[x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\]

마치며

적용법이 비교적 쉬웠다.

하지만 검색 도중, QuickLaTeX라는 툴이 존재했다. MathJax가 불편해지면 추가해야겠다.

Leave a Comment