[MathJax] 구글 블로그에 수식 넣기

 개발 관련 글을 쓰다보니 아무래도 수학 공식을 인용하는 경우가 많습니다. 이때 MathJax를 이용하면 아름다운 수학 공식을 표현할 수 있습니다.

MathJax를 사용하기 이전에는 수학 공식을 Web에서 수학 공식을 작성한 후 이미지를 캡쳐하여 블로그에 포스팅했었는데 MathJax를 사용하고 나서는 블로그에서 바로 작성할 수 있어 글 쓰는 만족도가 전보다 훨씬 높아졌습니다.

MathJax를 사용하기 위해서는 블러그의 템플릿의 header안에 아래 내용을 복사 붙여넣기 하시면 됩니다.

<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>    
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: { extensions: ["AMSmath.js","AMSsymbols.js"], 
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>

먼저 블로그에 로그인 한 후 왼쪽의 테마 메뉴를 클릭합니다.

"맞춤설정"의 콤보 박스에서 "HTML 편집" 항목을 선택합니다.

HTML의 head 섹션 바로 아래에 위 내용을 복사 붙여넣기 합니다.

오른쪽의 저장 버튼을 눌러 수정 사항을 저장합니다.

[사용법]

블로그에 수식을 작성할때 $...$ 수식을 넣으면 됩니다.

수식을 작성할때 MathJax 문법에 맞게 작성해야 하기 때문에 Web에서 MathJax Editor(제가 주로 이용하는 사이트 : https://www.latex4technics.com/)에서 수식을 완성한 후에 복사해서 사용하는 것이 좋습니다.

예시 1.)

위 사이트에 있는 기본 예제입니다.

$ --> MathJax 구문 시작
\int_{a}^{b} f(x)dx = F(b) - F(a)
$ --> 끝

$\int_{a}^{b} f(x)dx = F(b) - F(a)$

MathJax에서 사용 가능한 기호들은 여기서 확인할 수 있습니다.

예시 2.)

여러 식을 사용할때는 $\text{\begin{eqnarray} \end{eqnarray}}$구문을 사용하면 됩니다.

$ --> MathJax 구문 시작
\begin{eqnarray} \left\{ 
\begin{aligned}
    a_1x+b_1y+c_1z &= d_1+e_1 \\
    a_2x+b_2y&=d_2 \\
    a_3x+b_3y+c_3z&=d_3
\end{aligned} \right. 
\end{eqnarray}
$ --> 끝

$\begin{eqnarray} \left\{ \begin{aligned} a_1x+b_1y+c_1z &= d_1+e_1 \\ a_2x+b_2y&=d_2 \\ a_3x+b_3y+c_3z&=d_3 \end{aligned} \right. \end{eqnarray}$

예시 3.)

$ --> MathJax 구문 시작
\begin{eqnarray} \left\{
LCS(X_i,Y_j) = \begin{eqnarray} \left\{ 
\begin{aligned} 
    0 && if\text{ }i = 0\text{ }or\text{ }j=0\\ 
    LCS(X_{i-1},Y_{j-1})+1 && if\text{ }X_i=Y_j\\
    max(LCS(X_i,Y_{j-1}),LCS(X_{i-1},Y_j)) && if\text{ }X_i \neq Y_j 
\end{aligned} 
\right. \end{eqnarray}
$ --> 끝

$LCS(X_i,Y_j) = \begin{eqnarray} \left\{ \begin{aligned} 0 && if\text{ }i = 0\text{ }or\text{ }j=0\\ LCS(X_{i-1},Y_{j-1})+1 && if\text{ }X_i=Y_j\\max(LCS(X_i,Y_{j-1}),LCS(X_{i-1},Y_j)) && if\text{ }X_i \neq Y_j \end{aligned} \right. \end{eqnarray}$

정렬이 잘못되어 있습니다. 중괄호 첫째 수식을 왼쪽 정렬하고 &if& 문도 정렬하고 싶다면 각 수식의 맨 처음에 $을 넣어주면 됩니다.

예시 4.)

$ --> MathJax 구문 시작
\begin{eqnarray} \left\{
LCS(X_i,Y_j) = \begin{eqnarray} \left\{
\begin{aligned}
    &0 && if\text{ }i = 0\text{ }or\text{ }j=0\\
    &LCS(X_{i-1},Y_{j-1})+1 && if\text{ }X_i=Y_j\\
    &max(LCS(X_i,Y_{j-1}),LCS(X_{i-1},Y_j)) && if\text{ }X_i \neq Y_j
\end{aligned}
\right. \end{eqnarray}
$ --> 끝

$LCS(X_i,Y_j) = \begin{eqnarray} \left\{ \begin{aligned} &0 && if\text{ }i = 0\text{ }or\text{ }j=0\\ &LCS(X_{i-1},Y_{j-1})+1 && if\text{ }X_i=Y_j\\&max(LCS(X_i,Y_{j-1}),LCS(X_{i-1},Y_j)) && if\text{ }X_i \neq Y_j \end{aligned} \right. \end{eqnarray}$

예시 5.) cases 사용법

  
  $$ --> MathJax 구문 시작

  &LCS(X_i,Y_i)\\&=\begin{cases}

  LCS(X_{i-1},Y_{j-1}) + 1 & \text{if }X_i=Y_j\\

  max(LCS(X_i,Y_{j-1}),LCS(X_{i-1},Y_j)) & \text{if }X_i \ne Y_j

  \end{cases}

  \end{aligned}
  

  $$ --> 끝
  
  
  

$$ \begin{aligned} &LCS(X_i,Y_i)\\&=\begin{cases} 0 & \text{if = 0 or j = 0}\\ LCS(X_{i-1},Y_{j-1}) + 1 & \text{if }X_i=Y_j\\ max(LCS(X_i,Y_{j-1}),LCS(X_{i-1},Y_j)) & \text{if }X_i \ne Y_j \end{cases} \end{aligned} $$
예시 6.) text 색상 적용

  
\textcolor{red}{a}x^2 + \textcolor{blue}{b}x + \textcolor{green}{c} = 0
  
  

$$ \textcolor{red}{a}x^2 + \textcolor{blue}{b}x + \textcolor{green}{c} = 0 $$