티스토리 LaTeX 적용하는 아주 쉬운 방법

업데이트된 hELLO 스킨을 새로 적용하면서, 기존의 LaTex 설정이 사라졌다.

매번 찾아보기 귀찮으므로 LaTeX 적용방법을 정리해보겠다.

 

• 티스토리 블로그에 LaTeX(수식)을 작성할 수 있도록 Javasciprt로 작성된 KaTeX를 적용한다.
• KaTeX는 MathJax보다 빠른 렌더링을 제공하여 웹 페이지 로딩 시 거의 바로 수식을 출력할 수 있다.

 

티스토리 스킨 편집

스킨 편집에서 다음 코드를 `</head>` 바로 위에 복사 붙여넣기 한다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

 

그 아래에 두번째 코드를 복사 붙여넣기 한다.

<script>
  window.WebFontConfig = {
    custom: {
      families: ['KaTeX_AMS', 'KaTeX_Caligraphic:n4,n7', 'KaTeX_Fraktur:n4,n7',
        'KaTeX_Main:n4,n7,i4,i7', 'KaTeX_Math:i4,i7', 'KaTeX_Script',
        'KaTeX_SansSerif:n4,n7,i4', 'KaTeX_Size1', 'KaTeX_Size2', 'KaTeX_Size3',
        'KaTeX_Size4', 'KaTeX_Typewriter'],
    },
  };
</script>
<script defer src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script>

 

 

 

---

KaTex 공식문서에서 브라우저에서의 사용법을 참고할 수 있다.

KaTeX – The fastest math typesetting library for the web