Hexo 블로그에서 LaTeX 렌더링하기 (MathJax)

출처: https://databuzz-team.github.io/2018/10/13/hexo-mathjax/

배경

Hexo 블로그에는 Mathjax 플러그인을 깔아도 Markdown 문법과 LaTeX 문법이 충돌하면서 종종 렌더링이 되지 않는 경우가 있다.

이걸 수정하려면 웹기반 렌더러와 Javascript 쪽 지식이 있어야하는것 같은데, 나는 그 부분에 대해 지식이 전무하다.

구글 검색을 하면서 찾은 좋은 자료를 찾았는데, 보통 렌더러 셋업하는 과정이 1년에 한두번 있을까말까 한 작업이기 때문에 나중에 또 찾게될까봐 기록용으로 남긴다.

 

---

렌더러 셋업

Hexo의 기본 renderer인 hexo-renderer-marked를 새로운 rendering engine인 hexo-renderer-kramed 로 교체한다.

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

그리고 <블로그_경로>/node_modules/hexo-reneder-kramed/lib/renderer.js를 열어 다음과 같이 수정한다.

function formatText(text) {
  // Fit kramed's rule: $$ + \1 + $$
  // return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
  return text;
}

mathjax 설치

아래 커맨드를 입력해 mathjax를 설치한다. 아마 이미 설치되어있을 확률이 높다.

npm install hexo-renderer-mathjax --save

그리고 <블로그_경로>/node_modules/hexo-reneder-mathjax/mathjax.html을 열고 아래와 같이 수정한다.

<!-- <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>

LaTex와 markdown의 문법 충돌 fix하기

LaTex와 markdown의 문법이 충돌하는 것을 방지하기 위해 <블로그_경로>/node_modules\kramed\lib\rules\inline.js의 초반 부분을 같이 수정합니다.

escape: /^\\([`*\[\]()#$+\-.!_>])/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,