티스토리 code highlight, mathjax 적용

티스토리 에디터에 마크다운 모드가 추가되면서 내용에 집중할 수 있어서 많이 편해졌지만 아직 부족한 부분들이 있다.
글의 주제상 아무래도 코드나 수학 용어를 종종 사용하는데 대표적으로 code highlight 기능과 수식 표현이 가장 필요하다.

 

front를 직접 만들거나 jekyll 등으로 정적 사이트를 생성한다면 script 추가로 쉽게 해결하겠지만, 티스토리 에디터를 이용하는 만큼 티스토리에 맞는 방법으로 풀어야 한다. 다행히 티스토리에서는 html, css 등을 custom 하게 수정할 수 있는 방법을 제공한다.

 

관리 -> 스킨 편집 -> html 편집에서 입맛에 맞게 script를 편집할 수 있다.

 

code hightlight

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

흔히 사용하는 언어들은 cdn에서 다운 받아서 바로 사용할 수 있다.
적용이 되지 않거나 안될 법한 언어는 https://highlightjs.org/download/ 에서 확인한 후 별도로 추가하면 된다.

 

mathjax

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {inlineMath: [['$','$'], ['\\(', '\\)']]}
    });
</script>

$$ ... $$ 로 묶어서 mathjax 문법으로 한 문단을 만들 수 있다.
두 번째에 있는 script를 추가하면 $ ... $ 하나만 사용하는 inline 기능도 사용할 수 있다.