KaTex
백준 포스팅을 할 때 수식을 입력해야 할 일이 있기때문에 KaTex를 적용했다. KaTex란 웹페이지나 앱에서 수학 수식을 렌더링하기 위해 사용하는 JavaScript 라이브러리다. 아래의 링크에서 Installation - Browser를 확인하여 웹페이지에 적용할 수 있다.
KaTeX – The fastest math typesetting library for the web
Simple API, no dependencies – yet super fast on all major browsers.
katex.org
KaTeX 코드
티스토리 관리 페이지의 '스킨 편집' - 'html 편집' 에서 아래의 javascript를 html의 <head>에 입력해주면 된다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
<script>
window.addEventListener('load', function() {
renderMathInElement(document.body, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
],
throwOnError: false
});
});
</script>
사용방법
사용방법은 달러 기호 사이에 Tex 문법으로 수식을 작성하면 된다. 인라인 표기는 $로 감싸고, 블록 표기는 $$로 감싼다. 수식을 달러 한 개 사이에 작성하면 $x^2 + y^2 = 1$ 처럼 문장 안에서 표시되고, 달러 두개 사이에 작성하면
$$x^2 + y^2 = 1$$
처럼 가운데 정렬되며 한 줄을 차지하게 된다.
수학 기호들을 표기하기 위해 필요한 문법들은 위의 공식사이트의 Documentaion > Supported Functions 에서 찾아가며 사용하면 된다.
'티스토리' 카테고리의 다른 글
| [티스토리] 코드 블럭에 복사 버튼 만들기 (11) | 2023.11.30 |
|---|