더 빠른 성능의 KaTeX
한창 MathJax를 써오다가 속도하락을 경험한 후,
더 빠른 KaTeX를 알게되었다.
티스토리 HTML편집에서 <head> 사이에 아래와 같이 집어넣었다.
auto-render extension이 왜 따로 필요한지는 모르겠다.
<!-- KaTeX -->
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"
integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC"
crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script
defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js"
integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja"
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.16.0/dist/contrib/auto-render.min.js"
integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR"
crossorigin="anonymous"
onload="renderMathInElement(document.body);">
</script>
<script>
document.addEventListener("DOMContentLoaded", function(){
renderMathInElement(document.body, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false}
]
});
});
</script>사용법
인라인은 $로 감싸고, 블록 표기는 $$로 감싼다.
$ 1+1=2 $
$$ 1+2 = 3 $$$ 1+1=2 $
$$ 1+2 = 3 $$
'블로그관리' 카테고리의 다른 글
| 복사 방지 설정 (웹 / 티스토리 블로그) (0) | 2022.06.15 |
|---|---|
| 티스토리 마크다운 코드블럭에 highlight.js 적용하기 (0) | 2022.06.10 |
| 깃허브 스타일 마크다운 적용하기 (0) | 2022.06.10 |
| 티스토리 기준 마크다운 기본적인 사용법 (1) | 2022.06.07 |
| [SEO] 구글 서치 콘솔 등록하기 (0) | 2021.12.19 |
댓글