Jongbin Oh

I write something to think

2 minute read

\begin{equation} M = (Q, \Sigma, \Gamma, \delta, q_0, q_{\text{accept}}, q_{\text{reject}}) \end{equation}

Modulo operation 글을 쓰면서 LaTeX 수식을 블로그 포스트에 쓰고 싶단 생각을 했다. 텍스트에서 수식을 자동으로 만들어내는 것이 아니라 다른 곳에서 수식을 예쁘게 그리고 이미지로 삽입하는 건 되도록 피하고 싶었다. 귀찮고 소모적인 작업이다.

Jekyll 정적 사이트 생성기에서 LaTeX 수식을 렌더링하는 MathJax JavaScript 라이브러리를 사용한다. Minimal mistakes 테마를 기준으로 적었지만 Jekyll을 사용하고 있다면 어렵지 않게 적용할 수 있다.

블로그에 MathJax 라이브러리 추가

아래처럼 한 줄만 head에 추가하면 된다. 허탈할 정도로 간단한다.

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Minimal mistakes에서는 MathJax를 지원할까? 간단하게 추가할 수 있어서 테마에서는 지원할 계획이 없어 보인다. 어디에 추가하면 될까? 테마 소스를 변경하는 방법은 피하고 싶다.

  • _includes/head/custom.html is included at the end of the <head> tag.
  • _includes/footer/custom.html is included at the beginning of the <footer> tag.

Layouts - Minimal Mistakes - mmistakes.github.io

커스터마이징할 수 있는 방법을 만들어놨다. _includes/head/custom.html 파일을 편집하면 된다. 혹은 head_scripts 에 추가해도 된다.

head_scripts:
  - https://code.jquery.com/jquery-3.2.1.min.js
  - /assets/js/your-custom-head-script.js

모든 글에 로드할 필요가 없는 라이브러리라서 _includes/head/custom.html 파일을 사용했다.

<!-- _includes/head/custom.html -->
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

모든 글에서 MathJax를 쓰는 건 아니니 좀 더 최적화를 해보자

page.mathjax 변수로 MathJax 라이브러리 로딩 여부 결정

수학 블로그가 아니다. MathJax 라이브러리를 붙인 게 오버엔지니어링이란 생각이 들 정도로 수학 수식을 쓴 포스트는 극히 일부다. 그래서 페이지에 mathjax 변수를 추가해 이걸로 로딩 여부를 결정하게 했다.

defaults:
  - scope:
      path: ""
      type: posts
      values:
        layout: single
        mathjax: false

_config.yml 파일에 page.mathjax 변수 디폴트 값에 false 를 할당했다. 다음으로 로딩 여부를 결정하는 코드를 추가한다.


<!-- _includes/head/custom.html -->
{% if page.mathjax %}
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
{% endif %}

이제 page.mathjax 값이 true일 때만 MathJax 라이브러리를 로드한다.

---
title: "#math 부호가 다른 두 수를 모듈로 연산(modulo operation)할 때, 결괏값 부호는?"
mathjax: true
categories:
  - ...
  tags:
    - ...
    - ...
---

Jekyll 글마다 있는 Front matter(전문)에 mathjax: true 를 추가하면 LaTeX 문법을 MathJax가 예쁘게 보여준다.

포스트에서는 어떻게 LaTeX 수식을 쓰면 되는가? LaTeX 수식 구분자(delimiter)를 $ 문자 빼고는 그대로 사용할 수 있다. $$..$$, \(..\), \begin{equation}...\end{equation} 등을 사용할 수 있다.

\\(a = n \times q + r\\) 에서 \\(q\\) 를 어떻게 구하느냐에 따라 부호가 피제수 혹은 제수(divisor)를 따라가게 된다.

\(a = n \times q + r\) 에서 \(q\) 를 어떻게 구하느냐에 따라 부호가 피제수 혹은 제수(divisor)를 따라가게 된다.

이렇게 수식이 예쁘게 렌더링된다.

마치며

허탈할 정도로 쉽게 로드하고 사용할 수 있는 MathJax 라이브러리 덕분에 블로그 포스트에 LaTeX 수식을 쉽게 렌더링할 수 있다. LaTeX 외에 다른 문법도 지원하지만 호환성이 가장 좋고 오래 살아남을 LaTeX 수식을 사용하고 있다. 수학 수식을 많이 쓰지 않지만 가끔 LaTeX 문법으로 써서 예쁘게 렌더링 되는 걸 보면 흐뭇하다.

링크

You May Also Enjoy

#jekyll 워드프레스에서 지킬로 본진 이동

1 minute read

본진 programming notes 블로그 툴을 wordpress에서 jekyll로 바꿨다. 덩치가 있어 핫 하다고 무턱대고 바꾸기가 망설여진다. 그래서 개인 프로젝트 개발 일기 블로그 툴로 사용해봤다. 쓸만한가? 만족. 전진기지 안정화에 성공했으니 이제 본진에 신경 쓸 차례다.