-
티스토리 KaTeX 사용하기 (HTML 수학 기호)컴퓨터/HTML & JS & TS 2016. 11. 13. 13:23728x90반응형
KaTeX는 Khan Academy에서 제공하고있다.
KaTeX는 MathJax와 같이 HTML에서 수학 기호를 표시하기 위한 좋은 플러그인이다.
MathJax와 차이점은 매우 빠르고, 퀄리티가 좋고, server-side 렌더링을 지원한다.
사용 방법
1. <head> </head> 사이에 아래 코드를 추가한다. (20200729 버전 업데이트)
<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>2. 글을 쓸 때 HTML버튼을 눌러서 아래와 같이 사용한다.
MathJax 처럼 $$ 사이에 있는 식을 처리할 수도 있다.
<div id="math">$$ 식 $$</div> 또는 <div id="math">\\[ 식 \\]</div>
<!-- 예제 -->
$$ \int_2^3 $$ $$f(a,b,c) = (a^2+b^2+c^3)^3$$
$$f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi$$
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$ $$\begin{Vmatrix} a & b \\ c & d \end{Vmatrix}$$ $$ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1. $$더보기$$ \int_2^3 $$ $$f(a,b,c) = (a^2+b^2+c^3)^3$$ $$f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi$$ $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$ $$\begin{Vmatrix} a & b \\ c & d \end{Vmatrix}$$ $$ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1. $$참고 링크
https://khan.github.io/KaTeX/ (이 사이트에서 수식을 맞게 입력했는지 확인하고 쓴다.)https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX (지원하는 수식)
\color{#228B22}{F=ma} 색상 입히기
728x90'컴퓨터 > HTML & JS & TS' 카테고리의 다른 글
티스토리 블로그 생성일, 지난날 사이드바 (0) 2016.11.13 HTML 스크롤 탑(Scroll Top) JQuery (0) 2016.09.03 HTML 모바일 감지 JavaScript (0) 2016.09.03
