`Jekyll`에서의 `mathjax` 활용

2023-03-09 7 분 소요

블로그에 수학 관련 글을 쓰기 위해 mathjax를 사용해보았습니다. 아직 mathjax가 블로그에 완벽하게 적용되고 있지는 않지만, 기록 목적상 이렇게 글을 남겨봅니다.

`mathjax` 설정 및 적용

현재 이 블로그의 구조(file tree)는 아래와 같습니다. (jekyll의 minimal-mistake 테마를 사용하고 있습니다.) 확장자가 표시된 것은 파일이며, 확장자가 없는 것은 폴더입니다. 모든 파일/폴더를 표시하지는 않았고, 한 번이라도 만져본 적이 있는 파일/폴더만 표시했습니다. 파일/폴더 오른쪽에 ‘%’로 주석을 달아보았습니다만, 설명이 정확하지 않을 수 있습니다.

govin08.github.io
├ _data                                         % 
  └ navigation.yml                              % 블로그 우측 상단의 버튼 설정
├ _includes                                     % 
    ├ head                                      % 
        └ custom.scss                           % use_math 옵션, favicon 설정 등
    └ mathjax-support.html                      % mathjax를 불러오는 스크립트
├ _layouts                                      % post에 적용할 수 있는 layout들이 정의되어 있는 폴더
├ _pages                                        %
    ├ 404.md                                    % 404 error가 났을 때 표시되는 페이지
    ├ about.md                                  % Introduce에 나타나는 페이지
    ├ category-acrchive.md                      % Category에 나타나는 페이지
    └ tag-archive.md                            % Tag에 나타나는 페이지
├ posts                                         % 포스트 파일들
    ├ 2023-02-13-maupassant_1_la_parure.md      % 포스트 파일 : 모파상 - 목걸이
    ├ 2023-02-13-maupassant_2_boule_de_seif.md  % 포스트 파일 : 모파상 - 비곗덩어리
    ├ 2023-02-15-maupassant_3_une_vie.md        % 포스트 파일 : 모파상 - 여자의 일생
    ├ 2023-02-25-maupassant_4_bel_ami.md        % 포스트 파일 : 모파상 - 벨아미
    ├ 2023-03-01-diagonalization.md             % 포스트 파일 : 행렬의 대각화
    └ 2023-03-09-mathjax.md                     % 포스트 파일 : mathjax
├ _sass                                         % 블로그의 디자인을 조정하는 데 쓰이는 파일들이 모여있는 폴더
    └ minimal-mistakes                          %
        └ _pages.scss                           % 페이지의 전체적인 레이아웃을 조정할 수 있음.
        └ _utilities.scss                       % e.g. 메인 페이지의 폭을 조정할 수 있음, user-defined utility class를 정의할 수 있음.
        └ _variables.scss                       % minimal-mistakes 폴더 내의 파일들에서 쓰이는 변수들이 정의되어 있음
├ .github                                       % git init 시 생성되는 폴더
├ assets                                        %
    └ images                                    % 블로그의 시스템 이미지 파일들을 모아놓은 폴더
├ images                                        % 각 포스트에 첨부되는 이미지 파일들이 들어있는 폴더
├ config.yml                                    % (중요) 블로그의 전반적인 configuration을 설정하는 파일
└ readme.md                                     % github repo에 대한 설명이 담긴 마크다운 파일

mathjax를 설정하기 위해 추가하거나 수정한 파일들은

./_includes/mathjax-support.html (추가함)
./_includes/head/custom.scss (수정함)

입니다. 이후에

./posts/2023-03-09-mathjax.md

파일에 use_math 옵션을 true로 지정하면, 해당 포스트에 mathjax가 적용되어 수식을 쓸 수 있습니다. 세부적인 설명은 아래와 같습니다.

`mathjax-support.html`

minimal mistake를 처음 clone(혹은 fork)해오면, mathjax-support.html 파일은 아직 존재하지 않습니다. 따라서 이 파일은 새로 만들어주어야 합니다. ./_includes/ 하위에 mathjax-support.html 와 같은 파일명으로 파일을 만든 후 다음 내용을 입력한 뒤 저장합니다.

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
      inlineMath: [['$','$'], ['\\(','\\)']],
      processEscapes: true
    },
    TeX: {
      equationNumbers: {
        autoNumber: "AMS"
      }
    }
  });
</script>

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS_CHTML">
</script>

REMARK
mathjax를 사용할 때, 꼭 custom.scss, mathjax-support.html를 이용할 필요는 없습니다. 예를 들어, 위의 스크립트를 포스트 파일 (2023-03-09-mathjax.md)의 상단에 붙여넣으면 지금 한 것과 동일한 효과가 납니다. 굳이 custom.scss, mathjax-support.html를 설정하는 까닭은, 위의 스크립트를 매 포스트 파일마다 넣기가 번거롭기 때문에, use_math옵션을 주어, use_math=true일 때에는 자동적으로 포스트 파일의 앞쪽에 위의 스크립트가 불러와지도록 하는 것입니다.

WARNING
이 스크립트는 mathjax v2를 사용하는 스크립트입이다. mathjax가 v3까지 나와있음을 감안한다면, 이 스크립트를 좀 수정하여, mathjax v3를 구현할 수 있도록 하면 좋겠습니다만, 아직 방법을 찾지 못했습니다.

`custom.scss`

mathjax-support.html 와는 다르게 custom.scss는 clone/fork 시 자동으로 딸려 오는 파일입니다만, 모든 텍스트가 주석처리 되어 있는 상태여서 빈 파일이나 마찬가지입니다. 여기에 다음 내용을 입력한 후 저장합니다. (이 코드를 문자 그대로 입력하고 싶은데 잘 되지 않아, 부득이하게 링크로 대체합니다.)

`2023-03-09-mathjax.md`

github 블로그는 마크다운 파일로서 포스트를 만들어냅니다. 이 마크다운 파일은 지금 쓰고 있는 이 포스트를 작성하기 위해 만든 포스트 파일입니다. 포스트 파일의 맨 앞은 통상 아래와 같이 작성됩니다.

---
layout: single
title: "Jekyll에서의 mathjax 활용"
categories: mathematics
tags: [mathjax, LaTeX]
author_profile: false
---

여기에 한 줄 use_math: true을 추가하여

---
layout: single
title: "Jekyll에서의 mathjax 활용"
categories: mathematics
tags: [mathjax, LaTeX]
use_math: true
author_profile: false
---

와 같이 만들어줍니다. 그러면 이제, mathjax를 사용하여, LaTeX의 문법을 ‘제한적으로’ 사용할 수 있습니다.

수식이 잘 출력되는지 테스트

이상은, 며칠동안 고민하며 jekyll의 minimal-mistake에 LaTeX 수식 입력방식을 적용해보려고 시도한 노력이기는 합니다만, 많이 불완전합니다. 평소에 texworks로 쓰던 명령어들이 모두 동작하지는 않습니다. 예를 들면, inline 모드의 수식입력시 달러 사인 $을 수식의 양 옆에 쓰는 것과 display 모드의 수식 입력시 달러 사인 두 개 $$를 수식의 양 옆에 쓰는 것은 먹히지만 ; (1), (3), 소괄호나 대괄호의 형태로 쓰이는 것은 먹히지 않습니다 ; (2), (4). itemize 환경은 사용할 수 없는 것으로 보이며(5), equation 환경은 정상대로 작동합니다(6). 반면 equation* 환경은 먹히지 않으며(7), align 환경도 평소 texworks에서 쓰던 대로 작동하지 않습니다(8).

tests for `mathjax`.

(1) inline math for single dollar sign

Let $G$ be a group.

Let $G$ be a group.

(2) inline math for backslashed parentheses

Let \(G\) be a group

Let (G) be a group

(3) display math for double dollar sign

$$gH = \{gh:h\in H\}.$$

\[gH = \{gh:h\in H\}.\]

(4) display math for backslashed square brackets

\[gH = \{gh:h\in H\}.\]

[gH = {gh:h\in H}.]

(5) itemize environment

\begin{itemize}
\item
a
\item
b
\end{itemize}

\begin{itemize} \item a \item b \end{itemize}

(6) equation environment (numbered)

\begin{equation}
gH = \{gh:h\in H\}.
\end{equation}

\begin{equation} gH = {gh:h\in H}. \end{equation}

(7) equation environment (unnumbered)

\begin{equation*}
gH = \{gh:h\in H\}.
\end{equation*}

\begin{equation} gH = {gh:h\in H}. \end{equation}

(8) align environment

\begin{align}
gH = \{gh:h\in H\}\\
Hg = \{hg:h\in H\}
\end{align}

\begin{align} gH = {gh:h\in H}
Hg = {hg:h\in H} \end{align}

수식 예시

하지만, 어느 정도는 타협하여 아래와 같이 쓸 수 있습니다. 위의 문제들 중 (2), (4)는 (1), (3)으로 각각 대체할 수 있고, (5) 또한 마크다운 형식의 enumeration/itemization을 사용하면 되어서 크게 문제가 되지 않을 수 있습니다. 가장 큰 문제는 equation/align/align* 환경이라고 볼 수 있겠는데, 예를 들어, \begin{align}의 윗줄과 \end{align}의 아랫줄에 각각 $$를 입력하면 해결되는 것으로 보입니다.

다음과 같이 입력하면

Let $H$ be a subgroup of $G$.
Left and right cosets of $H$ by an element $g$ of $G$ are $gH$ and $Hg$ respectively, defined by

$$
\begin{align*}
gH &= \{gh:h\in H\}\\
Hg &= \{hg:h\in H\}
\end{align*}
$$

If $g\in H$, it follows that

$$
\begin{equation*}
gH=Hg=H.
\end{equation*}
$$

It is worthwhile noting that $gH$'s form a group itself ; we denote this new group by $G/H$.
Let

$$
\begin{equation}\label{quotient group}
G/H &= \{gH:g\in G\}
\end{equation}
$$

The set $G/H$ in \eqref{quotient group} is indeed a group under the following operation

$$(g_1H)(g_2H)=g_1g_2H.\tag{4}$$

아래와 같은 결과를 얻습니다.

Let $H$ be a subgroup of $G$. Left and right cosets of $H$ by an element $g$ of $G$ are $gH$ and $Hg$ respectively, defined by

\[\begin{align*} gH &= \{gh:h\in H\}\\ Hg &= \{hg:h\in H\} \end{align*}\]

If $g\in H$, it follows that

\[\begin{equation*} gH=Hg=H. \end{equation*}\]

It is worthwhile noting that $gH$’s form a group itself ; we denote this new group by $G/H$. Let

\[\begin{equation}\label{quotient group} G/H = \{gH:g\in G\} \end{equation}\]

The set $G/H$ in \eqref{quotient group} is indeed a group under the following operation

\[(g_1H)(g_2H)=g_1g_2H.\tag{4}\]

정리하면 다음과 같습니다.

기본 inline math / display math
- inline math : [$, $]는 잘 작동하지만, [$, $]는 작동히지 않습니다.
- display math : [$$, $$]는 잘 작동하지만, [\[, \]]는 작동히지 않습니다.
equation, equation*, align*, align* 환경
- equation 환경 : 아무 조건 없이 정상적으로 잘 작동됩니다.
- equation*, align, align* 환경 : 환경의 위와 아래에 $$를 넣어주면 잘 작동합니다.
- 상호참조 또한 잘 작동하지만, 아직도 이것저것 바꾸다보면 예기치 않은 오류가 발생하는 것이 보입니다.
tag{}는 잘 먹힙니다.

참고자료들

Add LATEX support to your blog by Zixu Wang (2019)
- 가장 직접적으로 참고한 자료입니다.
- 하지만, 상기 오류들이 발생하고 있기 때문에 이것이 최선의 솔루션은 아니라고 판단됩니다.
- mathjax2를 사용합니다.
EP21. LaTeX 수식 문법을 지원하는 mathjax를 블로그에 적용하기 by 테디노트(2023)
- 가장 쉬운 설명이지만, display math 모드의 수식 지원 및 align 환경이 지원되지 않습니다.
github blog와 latex by euns(2020)
- 해당 작성자분이 KTUG에서 발표한 내용이니만큼 가장 완성도있는 글이라고 생각됩니다. 자료도 꽤 최신입니다.
- 하지만, 제가 한 것처럼 minimal-mistakes 테마에 적용한 것이 아닌 minima 테마에 적용했기에, 똑같이 따라했을 때 오류가 납니다.
MathJax v3 in Jekyll by Arthur O’Dwyer(2020)
- mathjax의 버전에 따라 설정을 변경해야 함을 환기하고 있습니다. 즉, 기존의 mathjax 2가 아닌 mathjax3를 쓰는 방법에 대해 쓰고 있는 것 같습니다.
- 이 포스트의 내용 역시 잘 참고하고 적용할 수 있다면 아주 좋겠습니다만, 다 이해하지 못했습니다.
mathjax documentation
- mathjax를 제대로 활용하려면 응당 정독해야할만한 공식 documentation입니다만, 조금밖에 읽지 못했습니다.
- demo 또한 지원하고 있어서, 실제 mathjax를 적용했을 때 어떻게 웹상으로 렌더링되는지 보여주기도 합니다. 이 demo로 테스트해보면 소괄호와 대괄호를 이용한 수식 입력도 잘 표현한다는 것을 알 수 있습니다.

결론

따라서, 아직은 수식 입력에 관한 세팅을 완벽하게 했다고 볼 수는 없습니다. 추후 보완할 사항들은 다음과 같습니다.

대괄호/소괄호를 이용한 수식 입력이 구현되면 좋겠다.
mathjax v3 적용
- 현재 이 포스트에 구현되어 있는 mathjax 버전은 v2.
- v2 → v3 converter가 존재하나, 이것을 적용했을 때 오류가 난다.
\mathcal, \mathbb, \mathscr, \mathrsfs 등이 아직 적용되는지 테스트해보지 않았다. → 모두 잘 된다.
- For a vector space $V$, let $\mathcal B$ be a basis for $V$.
- The two dimensional euclidean space is denoted by $\mathbb R^2$.
- Let $\mathscr T$ be a topology.
- Let $\mathfrak M$ be a sigma algebra of a given set $X$.
\newcommand, \newenvironment와 같은 명령어가 적용되었으면 좋겠다.
- \newcommand는 먹히지 않는다.
  \newcommand\com\circ $(f\circ g)^{-1}=g^{-1}\circ f^{-1}$ $(f\com g)^{-1}=g^{-1}\com f^{-1}$
TeX에 쓰이는 각종 패키지들이 얼마나 사용될 수 있을지 모르겠다.
- tabular : X \begin{tabular}{cc}1&b\end{tabular}
- quote : X \begin{quote}Sartre said “Hell is other people.”\end{quote}
- verbatim : X
  \verb|\usepackage{geometry}|
- bmatrix : O
  $I=\begin{bmatrix}1&0\\0&1\end{bmatrix}$
- gather : O
  $\begin{gather*} \sum_{k=1}^nk=\frac{n(n+1)}2\\ \sum_{k=1}^nk^2=\frac{n(n+1)(2n+1)}6 \end{gather*}$
- multline : O
  $\begin{multline*} f(x)=f(1)+f'(1)(x-1)+f''(1)\frac{(x-1)^2}2\\ +f^{(3)}(1)\frac{(x-1)^3}{3!}+\cdots+f^{(n)}(1)\frac{(x-1)^n}{n!}+\cdots \end{multline*}$
- stackrel : O
  $e^{i\pi}+1\stackrel\ast=0$

mathjax 설정 및 적용

mathjax-support.html

custom.scss

2023-03-09-mathjax.md