MathJax 설정

🗓 2017년 11월 07일

⏱ 1 분

블로그에 수식을 입력이 좀 필요해서 MathJax를 설정하기로 했다. Tex 문법은 잘 몰라서 수식 형식은 AsciiMath를 이용하기로 했다.

AsciiMath를 이용하려면 아래 작업들을 해주어야 한다.

MathJax.js?config=AM_HTMLorMML
ASCIIMathML.js 파일을 추가

asciimath2jax 전처리기는 디폴트 구분자로 back-tick(`)을 사용하기 때문에 별도로 구분자 설정을 추가했다.

mathjax-config.js

MathJax.Hub.Config({
  asciimath2jax: {
    delimiters: [["$", "$"], ["\\(", "\\)"]],
  },
})

그런 다음 math 태그를 가지고 있는 문서에만 관련 자바스크립트를 로드하도록 하기 위해서 docpad.coffee에 아래와 같은 함수를 추가했다.

docpadConfig = {
    templateData:
      # ...
      getScripts: ->
        result = ["/vendor/jquery.min.js", "/scripts/script.js"]
        if @document.tags? and "math" in @document.tags
          result.push "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=AM_HTMLorMML"
          result.push "/vendor/ASCIIMathML.js"
          result.push "/scripts/mathjax-config.js"
        result
      # ...
}

테스트를 위해 AsciiMath 사이트의 예제 수식을 이용해 보았다.

sum_(i=1)^n i^3=((n(n+1))/2)^2

위 수식의 앞뒤에 $를 삽입하면 아래와 같이 표시된다.

$sum_(i=1)^n i^3=((n(n+1))/2)^2$

2019/09/01 업데이트: Gatsby로 전환 후 AsciiMath가 잘 동작하지 않아서 수식 형식을 Tex로 변경

\sum_{i=1}^{n} i^3 = \left({{n(n+1)} \over {2}} \right)^2

\sum_{i=1}^{n} i^3 = \left({{n(n+1)} \over {2}} \right)^2

housekeeping

math

이전 글: 글꼴과 스타일 설정

다음 글: 미루는 습관을 이기는 작은 책