I would like to share a super easy way to use math representations in Tistory blog. I used to blog in blogspot, and back then I had to add some javascript to under the <head> tag to use latex on my posts.
After moving to Tistory, I wanted to do the same since I was planning to post research reviews and proofs.
I used Mathjax before, but I've seen that Katex from Khan academy is becoming a new standard. It is fast and light. And your readers don't have to see the ugly latex syntax before the page fully loads. (MathJax 보다는 Katex이 몇 배는 더 좋습니다...)
The reference is here, Khan academy's katex source page.
So, let's get started.
You should add the script bellow under your <head> tag in the blog's HTML file.
<!--katex javascript-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false},
{left: "\\(", right: "\\)", display: false},
{left: "\\[", right: "\\]", display: true}
]
});
});
</script>
<!--end katex javascript-->
Go to the blog skins editing page.
Then to the HTML Editing page, ( To see the pictures of where they are, reference to this post of mine)
After that, at the <head> tag, may be right above </head> tag, paste the script above, just like the picture bellow.
Now Let's see the Examples
$f(x) = 4$$f(x) = 4 $
$$
\begin{aligned}
(x+y)^2 \= x^2 + 2xy + y^2 \\
\= (x+y)(x+y)
\end{aligned}
$$
$$ \begin{aligned} (x+y)^2 &= x^2 + 2xy + y^2 \\ &= (x+y)(x+y) \end{aligned}$$
* you should write them in one line so that the equations are rendered without <br/> tag. If you write latex syntax in a text mode of tistory blog, it automaticaly renders <br/> tag to line breaks. I will have to think of a way to go around this problem, in the meantime, I will have to use it in this manner.
'Misc > Blogging Tips' 카테고리의 다른 글
| [Tips] implement `` inline code block to your blog - (티스토리 인라인 코드 블럭 사용하기) (0) | 2020.10.02 |
|---|---|
| [TIPS] How to add your Tistory Blog to Google Search Console (0) | 2020.10.01 |