[Blog] 3. jekyll 테마에서 수식을 표현하자(MathJax) + Markdown 주요 수식

jekyll 테마를 활용하는 github 블로그에서 포스트에 수식을 넣기 위해 MathJax를 사용하는 방법을 정리합니다.
기본 테마는 Chirpy Jekyll Theme를 사용하고 있습니다.

 

 

1. 마크다운 엔진 변경

• _config.yml 파일의 내용에 다음을 추가 또는 수정

# Conversion
 markdown: kramdown
 highlighter: rouge
 lsi: false
 excerpt_separator: "\n\n"
 incremental: false​

 

 

2. mathjax_support.html 파일 생성

• _includes 디렉토리에 mathjax_support.html 파일 생성 후 아래 내용 입력

 <script type="text/x-mathjax-config">
 MathJax.Hub.Config({
     TeX: {
       equationNumbers: {
         autoNumber: "AMS"
       }
     },
     tex2jax: {
     inlineMath: [ ['$', '$'] ],
     displayMath: [ ['$$', '$$'] ],
     processEscapes: true,
   }
 });
 MathJax.Hub.Register.MessageHook("Math Processing Error",function (message) {
       alert("Math Processing Error: "+message[1]);
     });
 MathJax.Hub.Register.MessageHook("TeX Jax - parse error",function (message) {
       alert("Math Processing Error: "+message[1]);
     });
 </script>
 <script type="text/javascript" async
   src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
 </script>

 

• _layouts/default.html 파일의 head 부분에 아래 내용 삽입

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

 

• !) 제 블로그의 경우 head.html을 _includes에서 가져오므로 해당 파일에 추가 해주었습니다.

 

 

3. YAML front-matter 설정

• 수학식을 표시할 포스트의 front-matter에 use_math: true 적용
• 예시

 ---
 title: "Jekyll Github 블로그에 MathJax로 수학식 표시하기"
 tags:
   - Blog
   - MathJax
   - Jekyll
   - LaTeX
 use_math: true
 ---

 

4. 블로그 적용

• 포스트 작성

 

• 수식 작성

 

 

• 출력 결과

 

 

 

(참고) 주요 수식들