노션 페이지에 수학공식을 작성 후 마크다운으로 github pages에 노출하니 자동으로 변환이 되지 않았다.

구글링하니 MathJax 를 이용한 글이 몇가지 보여서 적용해 보았다.

위와 같이 원치 않는 부분까지 치환이 되는 것이 보이고, 적용이 너무 느려서 대체 라이브러리를 찾아보았다.

Katex 라는 라이브러리가 많이 사용되어 적용해보았다.

~/_includes/katex_support.html

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css>" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
<script defer src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js>" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
<script defer src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js>" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '\\\\[', right: '\\\\]', display: true}
          ],
          throwOnError : false
        });
    });
</script>

~/_layouts/post.html

---
layout: page
---
{% include katex_support.html %}

// ...생략

잘 적용 되었다 끄읏!