이제 TeX문법을 웹에서 렌더링 하는 솔루션을 알아봅시다.
처음에 말씀드렸듯, MathJax와 KaTex이라는 두가지 솔루션이 있습니다.
저는 KaTex으로 갈아탄 입장이기에 KaTex을 적용하는 방법론을 말씀드릴겁니다.
세팅과정
우선 다 모르겠다! 하시면
다음의 코드를 스킨의 HTML편집으로 들어가서 <head> 바로 밑에 넣으면 됩니다.
<!-- KaTex Start -->
<!--KaTex Auto-render Extension start-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.css" integrity="sha384-bYdxxUwYipFNohQlHt0bjN/LCpueqWz13HufFEV1SUatKs1cm4L6fFgCi1jT643X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.js" integrity="sha384-Qsn9KnoKISj6dI8g7p1HBlNpVx0I8p1SvlwOldgi3IorMle61nQy4zEahWYtljaz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" 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>
<!--KaTex Auto-render Extension end-->
<!-- KaTex End -->
하지만 이런 코드를 어떻게 얻었는지 원본장소를 알려드리는게 좋겠죠.
이런 정보검색의 기본은 공식홈페이지 부터 살펴보는 겁니다.
바로, 다음의 링크들에서 찾을 수 있습니다.
https://katex.org/docs/browser.html
KaTeX – The fastest math typesetting library for the web
Simple API, no dependencies – yet super-fast on all major browsers.
katex.org
https://katex.org/docs/autorender.html
KaTeX – The fastest math typesetting library for the web
Simple API, no dependencies – yet super-fast on all major browsers.
katex.org
직접 들어가보시면 아시겠지만, 공홈에서 제공하는 코드를 그대로 쓴것은 아닙니다.
코드를 좀 뜯어보시면, 이해하실 수 있는 분은 이해하실겁니다.
하지만 솔직히 코드를 왜 저렇게 썼는지 이해하시기 힘들다면,
제가 여기서 코딩을 알려드릴것은 아니기에
좀더 근본적인 코딩에 대한 이해가 필요하신 분이신겁니다.
솔직히, 우리 목적기준으론 몰라도 되는 내용이니
이해가 힘드시면 그냥 따라하시기만 하셔도 무방합니다.
적용
위의 코드를 삽입하셨다면, 이제 수식을 활용할 차례만 남았습니다.
간단합니다. $기호를 사용하여, 자신의 Tex문법을 묶어주면 됩니다.
이때, $기호를 한번씩만 사용하여 묶으면
인라인 수식이라고 하여 문장내에 그대로 삽입하는 방식입니다.
바로 이런 $\sum_{k=1}^n k^2=\frac{1}{6} n(n+1)(2n+1) $ 느낌이죠.
그런데 문장사이에 넣는것이 아니라,
수식이 내용의 본질이라 한줄을 차지하게 하고 싶으시다면,
$기호를 두번 사용하여 묶으면 됩니다.
바로 $$\sum_{k=1}^n k^2=\frac{1}{6}(n+1)(2n+1) $$ 이런 느낌인거죠.
그런데 실제로 따라해보시면 잘 안될겁니다.
이유는 좀 간단한데요, 이 $기호는 앞뒤에 인접한 코드가 있다면 인식하지 못합니다.
그런데 티스토리 글쓰기 도구의 기본모드는 자동으로 태그를 은밀하게 삽입하거든요.
그래서 수식을 쓰시고 나서 위의 기본모드를 HTML모드로 바꿔서 보시면
좀 잡스러운 태그들이 자동으로 생성되어 붙어있는것을 지워주셔야 합니다.
사실, 수학을 많이 쓴다면 아예 HTML모드에서 작업하시는게 속편할 정도일거구요.
자주 안쓰신다면 그부분만 조금 신경써주시면 됩니다.
깨알같은 단점이라면, 기호$는 이제 수식의 시작과 끝을 알리는 기호가 되어버렸기에 일반 블로그 포스팅에서 기호$를 사용하실때는 주의하셔야 한다는겁니다.
버전변경
제가 첨부한 자료들은 포스팅시점 기준의 버전일 뿐입니다.
향후 버전업이 될 수 있으며, 가능성은 낮지만 위의 코드로는 더이상 작동되지 않을 수 있습니다.
그 경우 누구보다 제가 가장 직격탄을 맞기에,
포스팅이 작동하지 않음을 알려드리고 새 포스팅을 작성하겠지만요.
아주 혹시나 먼 미래에 제가 블로그관리를 제대로 안하고,
아무리 봐도 제대로 한것 같은데 잘 안되신다면
위의 공식홈페이지와 검색을 통해 해결해보려고 노력하시면 좋을것 같네요.
기초적인 부분들
아 그리고 뭐.. 뭐요? HTML 편집이 뭐가 어쩨요?
라는 분도 있을것 같아, 해당 방법을 설명한 다른 포스팅을 링크합니다.
https://mainia.tistory.com/5728
티스토리 스킨 수정을 위해 html css 편집하는 방법
티스토리 스킨 수정을 위해 html css 편집하는 방법 환경: Chrome 티스토리는 소스를 직접 다운받아 수정할 수 있는 설치형 블로그는 아니지만 스킨에 적용된 HTML 을 편집할 수 있습니다. 물론 워드프레스, XE, K..
mainia.tistory.com
향후 시간이 흘러서 구체적으로 티스토리에서 HTML수정하는 법이 바뀔수도 있으나,
구글에서 "티스토리 HTML 편집" 정도의 검색을 하시면
쉽게 찾으실 수 있는 정보이니 넘어가도록 하겠습니다.
그리고 제가 위에서 언급했던 근본적인 코딩공부에 관심이 가신다면,
아래의 링크를 따라가 WEBn 수업을 차근차근 진행해보기를 추천합니다.
https://www.opentutorials.org/course/1
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은
www.opentutorials.org
'KaTeX' 카테고리의 다른 글
| 티스토리 블로그에 Tex 로 수학식 넣기 - 4 (0) | 2019.07.28 |
|---|---|
| 티스토리 블로그에 Tex 로 수학식 넣기 - 2 (0) | 2019.07.28 |
| 티스토리 블로그에 Tex 로 수학식 넣기 - 1 (0) | 2019.07.27 |