가장 빠른 TeX 수식 변환기, KaTeX 사용하기
네이버 블로그나 브런치 등 제한적인 블로그에 수식을 쓰는 경우 이미지를 붙여넣는 방법을 자주 사용합니다. 하지만 이 방법은 매번 수식 이미지를 만들고 붙여넣는 불편함과 문자열 단락 안에 수식을 삽입하기 곤란하다는 단점이 있습니다.
티스토리나 구글 블로거 등 스크립트까지 편집 가능한 스킨을 쓰는 경우, \(\LaTeX\)로 잘 알려진 \(\TeX\)문법을 사용해서 수식 표현을 할 수 있습니다.
\(\KaTeX\)
KaTeX는 TeX 문법으로 작성한 수식을 가장 빠르게 변환하는 것으로 알려진 조판엔진입니다. 내장 함수를 이용해서 직접 변환할 수도 있고, 자동 랜더링 함수를 불러와서 자동으로 랜더링을 수행할 수 있습니다.
CDN을 이용한 KaTeX 사용
널리 사용하고 있는 CDN 제공자를 통해 KaTeX를 사용할 수 있습니다. cdnjs의 KaTex와 jsDelivr의 KaTeX에서 최신 버전의 KaTeX CDN을 얻을 수 있습니다.
cdnjs에서 제공하는 KaTeX를 사용
<head>
<!-- KaTeX -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.1/katex.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.1/katex.min.js"></script>
</head>KaTeX를 사용하기 위해서는 최소한 스타일시트 katex.min.css와 스크립트 katex.min.js가 필요합니다. 불러온 이후 아래와 같은 방식으로 TeX양식의 문자열을 HTML양식의 문자열로 변환할 수 있습니다.
var html_str = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", {
throwOnError: false
});자동 랜더링 사용하기
매번 함수를 불러와서 수식을 변환하는 것도 상당히 고된 일입니다. \(\KaTeX\)는 간단한 표현으로 변환할 문자열을 표시할 수 있습니다. 이 기능을 사용하기 위해서는 추가로 ./contrib/auto-render.min.js를 불러와야 합니다.
<head>
<!-- KaTeX -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" />
<script defer src="//cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js"></script>
<script defer onload="renderMathInElement(document.body)" src="//cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js">
</script>
</head>스크립트 태그의 defer 속성은 스크립트가 전체 문서를 로드한 뒤 실행하도록 합니다. 두번째 스크립트에서 onload옵션은 로드 후 실행할 스크립트를 지정합니다. 예시문은 body태그의 내용물인 document.body를 변환하도록 했습니다. 랜더링 대상을 지정하는 문자열 기본값은 $$ {TeX} $$와 \\( {TeX} \\)입니다. 각각은 아래와 같은 결과물을 표시합니다.
블록 수식: $$ \int_{0}^{\infty} f(x) dx $$
인라인 수식 \\( E = m c^{2}\\)블록 수식: $$ \int_{0}^{\infty} f(x) dx $$
인라인 수식: \( E = m c^{2}\)
KaTeX가 제공하는 문법
그리스 문자와 괄호, 연산자 등을 지원합니다. 상세한 문법은 위의 링크를 참조하시면 됩니다.
'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글
| [SASS/SCSS] 티스토리 본문 스타일 (0) | 2019.05.02 |
|---|---|
| [VSCODE] 티스토리 스킨 개발 세팅: 컴파일러 제작 (0) | 2019.05.01 |
| 블로그에 소스코드 하이라이팅 기능 넣기 (0) | 2019.04.13 |
| jQuery: 티스토리 마크다운을 지원하는 목차 생성 스크립트 (0) | 2019.04.08 |
| 티스토리 스킨 만들기 (4) - CSS 개요 (0) | 2018.11.29 |
댓글