📝 코드 추가하기와 예제
종종 블로그에 기술 관련 글을 작성하다 보면, 수학 수식을 적어야 할 일이 있다.
구글 문서의 '부가기능'을 추가해서 작성하는 방법도 있지만,
수식이 이미지로 저장되는 터라 수정도 어렵고 생각보다 블로그에서 예쁘게 보이지 않아 고민하던 찰나...
MathJax를 사용해서 수학 수식을 작성하는 방법을 찾았다!
티스토리 관리 페이지의 꾸미기 - 스킨 편집으로 들어가 html을 직접 수정해야 한다.
<head>와 </head> 태그 사이에 하단과 같은 코드를 추가해 준다.
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
버전과 사용 방법이 달라지는 경우가 있을 수 있으므로, 필요시 최신 문서를 확인하자.
https://www.mathjax.org/#gettingstarted
이제 R markdown에서 사용하는 수식의 문법을 그대로 이용할 수 있다.
이 문법은 $$표시로 수식의 시작과 끝을 나타내는 데, 예를 들어 제곱근을 나타내고 싶다면 다음과 같이 작성하면 된다.
$$\sqrt{b^2 - 4ac}$$
위의 문법으로 글을 작성했을 때, 다음과 같이 보인다면 스크립트가 잘 동작하는 것이다!
글을 작성하면서 자주 사용하는 수학 표기들을 정리하자면,
$x = y$ |
$x = y$ |
$x^{n}$ |
$x^{n}$ |
$x_{n}$ |
$x_{n}$ |
$\hat{x}$ |
$\hat{x}$ |
$\frac{a}{b}$ |
$\frac{a}{b}$ |
$||A||$ |
$||A||$ |
$\sqrt{x}$ |
$\sqrt{x}$ |
$\mathbf{x}$ |
$\mathbf{x}$ |
$\alpha, \beta, \gamma$ |
$\alpha, \beta, \gamma$ |
$\begin{array} |
$\begin{array} {rrr} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{array} $ |
$\mathbf{X} = \left[\begin{array} |
$\mathbf{X} = \left[\begin{array} {rrr} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{array}\right] $ |
$O(n^2)$ |
$O(n^2)$ |
이외에도 다양한 수학 수식을 작성할 수 있는데, 구글에 R markdown formula라고 검색하면 많이 나온다.
참고할만한 사이트는 여기!
📝 인라인으로 사용하기
때때로 수학 수식을 문장 중간에 사용하고 싶은 경우가 있는데, 인라인으로 사용하고 싶은 경우 구분 기호는 $$..$$가 아니라 $..$라고 작성해 주면 된다. 하지만 이는 기본적으로 사용되지 않도록 막혀있다!
달러(ex. $5.99)를 표기할 때와 같이 일부 텍스트가 수학적으로 취급될 수 있기 때문이라고...
따라서, 인라인 구분 기호를 사용하기 위해서는 아래와 같이 코드를 수정해주어야 한다.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
만약, $표시가 연달아 나오는 경우는 수식으로 인식될 수 있기 때문에
수식으로 인식을 원치 않는다면 아래와 같이 html 모드로 변경해서 html 태그를 추가해주어야 한다.
<code>$$..$$</code>또는
<span>$</span><span>...</span><span>$</span>
$..$로 표기했을 때와 $$..$$로 표기 했을 때 차이점은
$..$는 이렇게 앞 $\frac{4z^3}{16}$ 뒤에 문장을 쓸 수 있고
$$\frac{4z^3}{16}$$
$$..$$는 이처럼 한 줄을 다 잡아먹기 때문에 앞뒤에 문장을 쓸 수 없다ㅋㅋ
최종적으로 내 티스토리에 적용된 코드는 다음과 같다.
📝 정리하며
그 외의 사용법 및 최신버전과 관련한 정보를 얻고 싶다면, MathJax의 공식 문서페이지(영문) 참고하면 된다!
MathJax
Beautiful math in all browsers.
www.mathjax.org
