'수식편집기' 태그의 글 목록

안녕하세요! 지난 포스팅(티스토리에 마크다운(Markdown)으로 블로깅하기)에 이어 이번에는 티스토리 블로그에 어떻게 MathJax를 이용하는지 알아보겠습니다.

# MathJax란?

MathJax란 오픈 소스 기반으로 웹 상에서 수식을 표현해 주는 툴이라고 할 수 있습니다.

일반적으로 MS Word나 한글 같은 워드 프로세서에는 기본적으로 수식 툴이 내장되어 있는데요,
이를 웹 상으로 옮기려면 수식을 이미지화 하여 삽입하는 방법 밖에는 없답니다. (적어도 제가 찾아보기에는요ㅜㅜ)
이는 많은 수식을 적기에 매우 불편할 뿐만아니라 특히, 문장 안의 수식같은 경우에는 정렬이 제대로 되지 않아 보기에 이쁘지도 않습니다.

그래서 나온 대안책이 바로 웹 상에서 HTML 형식으로 수식을 적으면 이를 서비스 제공자가 렌더링 해주는 방식입니다.
그 대표적인 사례가 바로 MathJax죠.

# Why MathJax?

웹 상에서 수식을 표현하는 데 다양한 방법들을 찾을 수가 있었는데요,
그 중에서 가장 대중적이고 편리한 툴이 바로 MathJax입니다.

티스토리 블로그에서의 사용에 초점을 두어 MathJax의 장점들에 대해 알아보도록 하겠습니다.

# MathJax의 장점

티스토리 블로그에서 사용이 편리하다

실제로 티스토리 블로그에서 MathJax를 사용하려면 관리 > 꾸미기 > HTLM/CSS 편집 > HTML/CSS 에서 skin.html의 </head> 위에 다음 코드를 붙여 넣기만 하면 된답니다.
```
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
```
문법이 간단하다

MathJax는 기본적으로 LaTeX와 동일한 문법을 사용합니다.
기본적인 문법 설명은 Wiki Books - LaTeX/Mathematics에 잘 설명이 되어 있네요~
영문으로 되어 있어도 수식들이니까 알아보는데 큰 문제는 없을 것 같네요.
예쁘다

직접 써보시면 아시겠지만 확실히 이미지로 수식들을 붙여 넣는 것보다 수식이 더 깔끔하고 보기에 좋습니다.
직접 한 번 비교해 보시죠.
Note: 수식 비교

먼저 제가 이 블로깅에 대해 아무것도 모를 때 작성한 포스트(Reynolds Transport Theorem과 검사 체적(Control Volume)) 중 일부를 보여 드리겠습니다.

▲ 수식을 이미지로 붙여 넣은 경우

보시다시피 문장 내에서 수식 이미지가 잘 정렬되지 않아 깔끔하지 않습니다.

그러면 이번엔 똑같은 글을 MathJax를 이용하여 작성해 보겠습니다.

우선, RTT의 기본 식에 대해 알아 보겠습니다.

$d d t (\int Ω (t) f (x, t) d V) = \int Ω (t) \partial f ( x , t ) \partial t d V + \int \partial Ω (t) (v b \cdot n) f (x, t) d A$ $\frac{d}{dt}\left(\int_{\Omega(t)}{\mathbf{f}(\mathbf{x},t)dV}\right)=\int_{\Omega(t)}{\frac{\partial \mathbf{f}(\mathbf{x},t)}{\partial t}dV+\int_{\partial \Omega(t)}{(\mathbf{v^b} \cdot \mathbf{n})\mathbf{f}(\mathbf{x},t)dA}}$
여기서 $f(x,t)$ 는 계 내의 물리량, $v^b = v^b (x,t)$ 는 위치 $x$ 에서의 경계면의 속도이며 $n=n(x,t)$ 는 위치 $x$ 에서의 곡면 $\partial \Omega (t)$ 의 법선 벡터입니다.

▲ 수식을 MathJax로 작성한 경우

훨씬 깔끔한게 느껴지시나요?
처음엔 LaTeX 문법이 조금 어려우실 수도 있지만 익숙해 진다면

참고로 위의 내용은 다음과 같은 마크다운 문법(+LaTeX 문법)으로 작성되었습니다.
```
>> 우선, RTT의 기본 식에 대해 알아 보겠습니다.
>> $$ \frac{d}{dt}\left(\int_{\Omega(t)}{\mathbf{f}(\mathbf{x},t)dV}\right)=\int_{\Omega(t)}{\frac{\partial \mathbf{f}(\mathbf{x},t)}{\partial t}dV+\int_{\partial \Omega(t)}{(\mathbf{v^b} \cdot \mathbf{n})\mathbf{f}(\mathbf{x},t)dA}}$$
>> 여기서 $f(x,t)$는 계 내의 물리량, $v^b = v^b (x,t)$는 위치 $x$에서의 경계면의 속도이며 $n=n(x,t)$는 위치 $x$에서의 곡면 $\partial \Omega (t)$의 법선 벡터입니다.
```

여태까지 MathJax 툴의 장점들을 알아 보았습니다.
위의 장점들 때문에 저는 공학 블로그 포스팅을 할 때에 마크다운(Markdown)과 MathJax 툴을 사용한답니다.

# 티스토리 블로그에서 MathJax 사용법

우선 MathJax 툴을 티스토리 블로그에서 사용할 수 있도록 해야 겠죠.
위에서 소개한대로 관리 > 꾸미기 > HTLM/CSS 편집 > HTML/CSS 에서 skin.html의 </head> 위에 다음 코드를 붙여 넣습니다.

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

그러면 이제 마크다운 문법으로 글을 작성하실 때, 다음과 같은 규칙으로 MathJax 툴을 호출할 수 있답니다.

문단 사이에 수식 삽입

문단 사이에서 $$ 과 $$ 사이에 LaTeX 수식 표현을 넣습니다.
예시 글
```
윗 문단
$$y=ax+b$$
아랫 문단
```
결과

윗 문단

$y = a x + b$ $y=ax+b$
아랫 문단
문장 안에 수식 삽입

문장 안에서 $ 과 $ 사이에 LaTeX 수식 표현을 넣습니다.
예시 글
```
앞 문장 $y=ax+b$ 뒷 문장
```
결과

앞 문장 $y=ax+b$ 뒷 문장

이런식으로 글 속에서 LaTeX 문법을 섞어 작성하신 후에 StackEdit 등의 마크다운 변환기를 통해 HTML로 변환한 코드를 티스토리 블로그 글 작성란(HTML)에 붙여 넣기만 하면 예쁜 수식이 보이게 된답니다~!
어때요, 참 쉽죠?ㅎㅎ

# 글을 마치며

오늘은 MathJax 툴을 어떻게 티스토리 블로그에 적용시키고 수식을 작성하는지에 대해 알아보았습니다.
STEM 활동의 일환으로 시작한 블로깅이지만 생각보다 재미있는 기능들이 많네요.

이것으로 기본적인 공학 블로그 포스팅하는 법을 마치고 이제 STEM의 공식 공과대학 학부생 멘토링 블로그 STEMentor에서 다양한 공대 전공 과목들로 만나뵙도록 하겠습니다~!

저작자표시 비영리 변경금지

'Reviews' 카테고리의 다른 글

StackEdit 사용하기 (0)	2014.10.16
티스토리에 마크다운(Markdown)으로 블로깅하기 (3)	2014.10.09
마크다운(Markdown) 문법과 MathJax로 공학 블로그 포스팅하기 (1)	2014.10.08

티스토리에 MathJax로 포스팅하기