1. 문제 상황

jekyll-theme-yat 테마를 활용하여 gitblog를 제작하였는데 수식이 적용되지 않고 있다. 로컬 서버(bundle exec jekyll serve 명령어 활용)에서는 수식이 적용되지만 Git Blog에서는 수식 적용이 안 되고 있다. 수식에 관한 코드는 아래와 같다.

$$
\mathcal{P}_{ss'} = \mathbb{P} \ [S_{t+1} = s' \mid S_t = s]
$$

2. 삽질

해결 방안만 보고 싶다면 ‘3. 해결 방안’ 부분을 참고 바란다. 지금부턴 어떤 삽질을 열심히 했는지 적어보려 한다.

2.1. velog 따라하기

‘Markdown 수식’이라는 문구로 구글에 검색하였다. 첫 글을 보니 velog에서는 $$이 무조건 다른 줄에 있어야 한다고 한다. git blog도 비슷하지 않을까 하는 생각에 적용해보았다. 아쉽게도 문제는 해결되지 않았다.

2.2. MathJax 적용

열심히 구글링한 결과 MathJax를 찾게 되었다. MathJax를 활용하면 Jekyll Github 블로그에서 수학식 표시 가능하다고 한다. 적용 방법은 해당 사이트를 참고 바란다. 똑같이 했지만 역시 문제는 해결되지 않았다.

2.3. mathjax.html 수정

파일들을 열심히 확인해보니 _includes/extensions/mathjax.html 파일을 발견하였다. 파일이 존재하는데 왜 적용이 되지 않을까 고민하였고 해당 파일에 문제가 있다고 생각하였다. 그래서 2.2. 단계에서 언급한 사이트의 mathjax_support.html 파일 내용을 복사해서 붙여 넣었다. 그럼에도 불구하고 문제는 해결되지 않았다.

2.4. head.html 수정

무슨 문제일까… 계속 고민하며, 제작자의 데모 사이트를 다시 확인하였다. 제작자 역시 수식이 적용되지 않고 있었다. 제작자 코드도 문제가 있었기에 해당 테마를 갖고 gitblog를 제작한 사람들도 비슷한 문제를 겪고 있을 거라 예상하였다. github의 issues를 확인해보니 같은 문제를 경험한 사람들이 있었고 해결 방법도 찾게 되었다. 생각보다 간단한 해결 방법이었다…

3. 해결 방안

  • _includes/head.html 파일 수정하기

아래와 같이 {%- include extensions/mathjax.html -%} 코드를 16번 라인에 추가하면 된다. 아마 제작자가 추가하는 것을 잊은 것 같다.

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c">
  {%- seo -%}
  <link rel="icon" href="">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-noto-sans@0.0.72/index.min.css">
  <link rel="stylesheet" href="/assets/css/main.css">
  <script src="/assets/js/main.js"></script>
  {%- feed_meta -%}
  {%- if jekyll.environment == 'production' and site.google_analytics -%}
  {%- include extensions/google-analytics.html -%}
  {%- endif -%}
  {%- include extensions/mathjax.html -%}
  {%- include extensions/code-highlight.html -%}
  {%- include custom-head.html -%}
</head>