[HTML/CSS] 티스토리 스킨 - KATEX 수식 적용

티스토리 스킨- 수식을 빠르게 렌더링하는 KATEX 적용 방법을 정리합니다.

KATEX

KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.
KaTeX - official page code, KaTeX- github

이전에는 LATEX를 적용했었는데 렌더링이 더 빠르다고 해서 변경해주었다. 다음 코드는 스킨에 적용한 html/css 코드이다.

    <!-- KaTeX -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
          renderMathInElement(document.body, {
            // customised options
            // • auto-render specific keys, e.g.:
            delimiters: [
                {left: '$$', right: '$$', display: true},
                {left: '$', right: '$', display: false},
                {left: '\\(', right: '\\)', display: false},
                {left: '\\[', right: '\\]', display: true}
            ],
            // • rendering keys, e.g.:
            throwOnError : false
          });
      });
    </script>
    <!-- KaTeX End-->

/*기본 폰트가 크게 설정되어 있어 조정해줬다.*/
.katex { font-size: 1.1em!important; }