기존에 사용하던 MathJax가 블로그 로딩에 너무나 많은 시간이 걸려서, 다른 방법을 알아보던 중에 KaTex를 알게되었습니다.
KaTex도 MathJax와 마찬가지로 웹에서 수학 표기를 위한 JavaScript입니다.
아래는 KaTex 공식 사이트입니다.
KaTeX – The fastest math typesetting library for the web
Simple API, no dependencies – yet super fast on all major browsers.
katex.org
공식 사이트 첫 화면에서 MathJax에 비해서 상당히 빠르다고 자랑하고 있습니다..
사용법은 공식 사이트 첫 화면에서 Installation - Browser를 따라가면 확인할 수 있습니다.
MathJax와 마찬가지로 html 편집으로 들어가서 <head>와 </head> 사이에 아래 script를 넣어주면 완료됩니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
그리고, 사용자 편의를 위하여 다양한 기능들이 있지만... 현재 블로그에서 필요한 것은 단순히 수학 표기만 하면 되기 때문에, 따로 자세히 읽어보지는 않았습니다. 나중에 속도가 문제가 되거나 필요가 생기면 사용법을 좀 더 자세히 읽어봐야겠습니다...
기본적인 사용법은 아래와 같습니다.
\\( x^2 + y^2 = 1 \\)
이 방법(소괄호)은 다음과 같이 \(x^2 + y^2 = 1\) 인라인으로 수식이 표현됩니다.
or
\\[ x^2 + y^2 = 1 \\]
대괄호로 묶이게 되면 가운데 정렬이 되면서 한 줄을 다 차지하게 됩니다.
\[x^2 + y^2 = 1\]
문법은 아래 공식사이트의 Supported Functions를 참조하면, 웬만한 표기는 가능할 것 같습니다.
https://katex.org/docs/supported.html
KaTeX – The fastest math typesetting library for the web
Simple API, no dependencies – yet super fast on all major browsers.
katex.org
한 번 쭉 훑어보다가 매크로를 정의해서 사용하는 것이 있었는데, 알아두면 유용하게 사용할 수 있을 것 같습니다.
아래처럼 사용할 수 있습니다.
\def\foo{x^2} \foo + \foo
이것은 다음과 같이 표시됩니다.
\(\def\foo{x^2} \foo + \foo\)
추가적으로 글에 수학 표기를 작성하다보면 문법은 정상적인데 수학 표기로 변경되지 않을 때가 있습니다. 그럴 때에는 적용되지 않은 부분의 글자색을 변경해주니까 정상적으로 적용이 되는데.. 이유는 잘 모르겠습니다...
'잡다구리' 카테고리의 다른 글
| 티스토리에서 수학 수식 쓰는 방법(LaTex, MathJax) (0) | 2020.08.08 |
|---|
댓글