[티스토리 꾸미기] 노션처럼 인라인 수식과 수식 블록 추가하기

0. 목표

노션처럼 인라인 수식과 수식 블록 작성이 티스토리에서도 가능하게 한다.

인라인 수식을 썼을 때 모습

수식 블록을 썼을 때 모습

필자의 경우에는 markdown 문법으로 본문 글을 고정해놓았음으로, 추가적으로 이러한 환경에서도 가능하도록 방법을 설명하겠다. 혹시 마크다운으로 티스토리 문법을 바꾸는 체질개선을 하고 싶은 분들은 다음 글을 보고 오면 된다.

 

 

[티스토리 꾸미기] Markdown 문법으로 자동 포스팅! (수동으로 div 태그 안 넣어줘도 됨!)

 

1. 티스토리 HTML에 javascript 추가

<!-- 수식 -->
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [['\\(', '\\)']], // 인라인 수식
            displayMath: [['\\[', '\\]']], // 수식 블록
            processEscapes: true
        }
    });
</script>
<script type="text/javascript" async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

내 경우 위에 설정을 추가했다.

        tex2jax: {
            inlineMath: [['\\(', '\\)']], // 인라인 수식
            displayMath: [['\\[', '\\]']], // 수식 블록
            processEscapes: true
        }

해당 json은 인라인 수식을 불러올 문법과 수식 블록을 불러올 문법을 설정하는 것이다. 나는 각각 소괄호 중괄호와 그 바로 앞에 백슬래쉬 두 개를 넣는 것을 기본으로 했다. 이와 같이 백슬래쉬를 두 개로 해놓은 이유는, 티스토리에서 markdown 문법을 자신들의 기본 모드로 변환할 때, 종종 (어떤 상황에서 그러한지는 잘 모르곘다.) 괄호 옆에 백슬래쉬가 붙는 경우가 있기 때문이다. 일반적인 괄호 사용과 수식 블록을 구분하기 위해 위와 같이 처리했다.

2. 실제 사용

이렇게 해두고 글을 작성하면

\\(10^{10}\\)

= $10^{10}$ 과 같이 인라인으로 표시되고

\\[10^2\\]

= $$10^2$$

과 같이 표현할 수 있다.

3. 수식 문법 활용법

수식은 기본적은 Latex라는 문법을 따른다. 직접 공부해보고 싶은 분들은

 

 

위키백과:TeX 문법 - 위키백과, 우리 모두의 백과사전

 

위 링크를 보며 직접 해보면 되고, 만약 그럴 여유가 없는 분들은

 

 

Equation Editor for online mathematics - create, integrate and download

 

해당 에디터에서 수식을 클릭하며 원하는 수식을 만들어 Latex 문법으로 전환한 뒤에 사용하면 된다.