개요
- 웹 페이지에서 LaTeX 수식을 적을 수 있도록 Javasciprt로 작성된 KaTeX를 티스토리 스킨에 적용시켜 봅니다.
- KaTeX는 MathJax보다 렌더링이 빨라 웹 페이지 로딩 시 거의 바로 수식을 출력해줍니다.
- hELLO 스킨 사용 시의 충돌 수정이 있습니다!
스크립트 불러오기
KaTeX – The fastest math typesetting library for the web
Simple API, no dependencies – yet super fast on all major browsers.
katex.org
위 링크는 KaTeX를 브라우저에서 사용하기 위한 원본 문서입니다. 이 글을 보고 모자라거나 궁금한 점이 있으시면 원본을 참조해주시면 되겠습니다.
원글에 표기된대로 우리가 사용하는 페이지에서 KaTeX를 전역적으로 사용하기 위해서 다음과 같은 코드를 </head> 위에 작성합니다. (최신 버전으로 사용하기 위해서는 원본에서 해당 코드를 찾아주시기 바랍니다.)
아래 코드로 문제가 없으시다면 그대로 사용하시면 되고, 만약 hELLO 스킨이나 기타 스킨을 사용하면서 제대로 적용이 안되는 문제가 있다면 밑에 "문제 수정하기"를 참고해주시기 바랍니다.
<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>FOUT / FOIT 방지하기
KaTeX의 FOUT / FOIT를 방지하기 위해 KaTeX에 사용하는 font를 prefatch할 수 있습니다.
이를 위해서 아래의 코드를 앞선 코드 아래에 붙여넣어 주세요.
<script>
window.WebFontConfig = {
custom: {
families: ['KaTeX_AMS', 'KaTeX_Caligraphic:n4,n7', 'KaTeX_Fraktur:n4,n7',
'KaTeX_Main:n4,n7,i4,i7', 'KaTeX_Math:i4,i7', 'KaTeX_Script',
'KaTeX_SansSerif:n4,n7,i4', 'KaTeX_Size1', 'KaTeX_Size2', 'KaTeX_Size3',
'KaTeX_Size4', 'KaTeX_Typewriter'],
},
};
</script>
<script defer src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script>(선택) 문제 수정하기
일부에만 적용되는 문제
글 미리보기의 코드 블럭에서만 적용이 되고 있고 나머지에서는 전부 적용되지 않고 있습니다.
해결
KaTeX는 기본적으로 document의 "DOMContentLoaded" 이전에 실행이 되도록 설정되어 있는데, 이 경우 티스토리에서는 본문의 내용이 window의 "Load" 이후에 출력이 완료되는 경우가 많습니다.
KaTeX의 rendering은 기본적으로 "auto-render.min.js"의 "onload" 옵션을 통해 실행이 지정되기에 이 부분을 비활성화 시키고 window "Load"가 완료된 후 수식을 rendering하도록 변경해야 합니다.
아래 코드를 KaTeX script를 불러온 줄 밑에 추가해줍시다.
<script>
window.addEventListener("load", function() {
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>필요없는 부분까지 적용되는 문제
글 내부 본문이 아닌 글 미리보기에서도 KaTeX가 적용되다보니 아래와 같이 코드블럭으로 감싸져 있던 Bash 명령어의 $ 표시가 KaTeX rendering error를 발생시키는 문제가 되었습니다.
해결
Rendering의 범위를 제한해서 글의 본문에 대해서만 적용이 되도록 하겠습니다.
먼저 "auto-render.min.js"를 그대로 사용하는 경우 "onload"의 값을 변경해주면 됩니다.
querySelector를 사용해서 글 본문의 ID인 article을 찾도록 하겠습니다.
<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.querySelector('#article');"></script>앞선 문제 해결을 진행한 경우에는 동일하게 아래 코드에서 document.body에 querySelector를 사용해주면 되겠습니다.
<script>
window.addEventListener("load", function() {
renderMathInElement(document.body.querySelector('#article'), {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>결론
여기까지 티스토리 스킨에 KaTeX (LaTeX) 적용하기가 끝났습니다.
추가적인 문제나 질문이 있으시면 댓글주세요. 감사합니다.
