ghdic

ghdic

Don’t try to show off, just be yourself and do what you enjoy doing.

mathjax 깃헙블로그 적용 및 문법

7 분 소요

Mathjax란?

MathJax를 사용하면 사이트 내에서 여러 수학 수식들을 사용할 수 있다.

MathJax 적용 방법

이 블로그에서 적용방법 펌

마크다운 엔진 변경

_config.yml 파일의 내용을 아래와 같이 수정

# Conversion
markdown: kramdown
highlighter: rouge
lsi: false
excerpt_separator: "\n\n"
incremental: false

mathjax_support.html 파일 생성

_includes 디렉토리에 mathjax_support.html 파일 생성 후 아래 내용 입력

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    TeX: {
      equationNumbers: {
        autoNumber: "AMS"
      }
    },
    tex2jax: {
    inlineMath: [ ['$', '$'] ],
    displayMath: [ ['$$', '$$'] ],
    processEscapes: true,
  }
});
MathJax.Hub.Register.MessageHook("Math Processing Error",function (message) {
	  alert("Math Processing Error: "+message[1]);
	});
MathJax.Hub.Register.MessageHook("TeX Jax - parse error",function (message) {
	  alert("Math Processing Error: "+message[1]);
	});
</script>
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

_layouts/default.html 파일의 <head> 부분에 아래 내용 삽입

{% if page.use_math %}
  {% include mathjax_support.html %}
{% endif %}

YAML front-matter 설정

수학식을 표시할 포스트의 front-matter에 use_math: true 적용

---
title: "Jekyll Github 블로그에 MathJax로 수학식 표시하기"
tags:
  - Blog
  - MathJax
  - Jekyll
  - LaTeX
use_math: true
---

손글씨를 Mathjax 문법으로 바꿔주는 사이트

아래 문법들을 익히기 싫다면 사용해보자

Mathjax 문법

정리하다 지친다.. 엌 일단 모아만 두자

자세한건 여기서 알아보자!

실제 출력결과를 확인보고 싶다면?

인라인모드(한줄 표현), 인클로즈모드(수식 표현)

$ $으로 묶어줌으로써 mathjax를 사용한다는 것을 컴퓨터에게 전달합니다. 수식을 인라인형태로 쓸꺼냐. 아웃라인형태로 쓴꺼냐에 따라 두가지 선택지가 있습니다.

$ ... $ 형태로 사용
$$ ... $$ 형태로
  • $\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$

그리스 문자 사용

다양한 그리스 문자들을 사용할 수 있습니다

\alpha, \beta, ... \omega //소문자
\Gamma, \Delta, ... \Omega //대문자
  • $\alpha, \beta, … \omega$
  • $\Gamma, \Delta, … \Omega$

지수(upper), 로그 표현(sub)

x^2, x_i^2 // 지수는 ^을 이용하여 표현
\log_2 x // \log를 이용, _를 이용해 subscript 표현
  • $x^2, x_i^2$
  • $\log_2 x$

중괄호 그룹 묶기

x^5^6
x^{5^6}
x_{i^2}
  • $x^5^6$
  • $x^(5^6)$
  • $x_{i^2}$

괄호

(2+3)[4+4] //소괄호, 대괄호는 그냥 쓰면됨
(2 + 3)[4 + 4] //띄워쓰기 하면 다를까?
\{22\} // 중괄호는 \과 함께 써줘야댐
(\frac{\sqrt x}{y^3}) //수식이 너무 작게 나옴
\left(\frac{\sqrt x}{y^3}\right) // \left(...\right)를 이용해 자동적으로 사이즈 조절 가능
  • $(2 + 3)[4+4]$
  • $(2 + 3)[4 + 4]$
  • ${22}$
  • 글씨 비교 $(\frac{\sqrt x}{y^3})$ 글씨 비교
  • 글씨 비교 $\left(\frac{\sqrt x}{y^3}\right)$ 글씨 비교

절대값과 내림, 올림 기호

|x|
\vert x \vert // 절대값
\Vert x \Vert // 벡터크기(둘다 걍 | 써도 됨)
\rangle x \rangle // 꺽인 괄호
\lceil x \ rceil // 올림
\lfloor x \rfloor // 내림
  • $ x $
  • $\vert x \vert$
  • $\Vert x \Vert$
  • $\rangle x \rangle$
  • $\lceil x \ rceil$
  • $\lfloor x \rfloor$

괄호를 더 크게

\Biggl(\biggl(\Bigl(\bigl((x)\bigr)\Bigr)\biggr)\Biggr)
  • $ \Biggl(\biggl(\Bigl(\bigl((x)\bigr)\Bigr)\biggr)\Biggr) $

합, 적분 등

\sum_1^n {n^2 + 1} // 표현1
\sum_{i=0}^\infty i^2 // 표현2
\prod \int \bigcup \bigcap \iint \iiint \idotsint // 기타 기호
  • $ \sum_1^n {n^2 + 1} $
  • $ \sum_{i=0}^\infty i^2 $
  • $ \prod \int \bigcup \bigcap \iint \iiint \idotsint $

분수 표현

\frac{a + 1}{b + 1} // 중괄호로 묶어주는게 핵심
{a + 1 \over b+1} // 이런식으로도 가능함
  • $\frac{a + 1}{b + 1} $
  • $ {a + 1 \over b+1 } $

여러가지 폰트들

\mathbb or \Bbb
\matbf
\mathit
\pmb
\mathtt
\mathrm
\mathsf
\mathcal
\mathcsr
\mathfrak
  • $\mathbb{mathbb}$ or $\Bbb{Bbb}$
  • $\matbf{matbf}$
  • $\mathit{mathit}$
  • $\pmb{pmb}$
  • $\mathtt{mathtt}$
  • $\mathrm{mathrm}$
  • $\mathsf{mathsf}$
  • $\mathcal{mathcal}$
  • $\mathcsr{mathcsr}$
  • $\mathfrak{mathfrak}$

루트표현

\sqrt{x^3}
\sqrt[3]{\frac xy}
  • $\sqrt{x^3}$
  • $\sqrt[3]{\frac xy}$

특별한 표현식

lim, sin, max 등의 표현식들
\sin x or sin x // 뒤에껀 이탈릭채
\lim_{x\to 0} {x^2 + x + 1}
\operatorname{foo}(x) // 정의되지 않은 이름의 함수 쓸때
  • $\sin x or sin x$
  • $\lim_{x\to 0} {x^2 + x + 1}$
  • $\operatorname{foo}(x)$

여러가지 기호들

\lt \gt \le \leq \leqq \leqslant \ge \geq \geqq \geqslant \neq // 비교 구문
\not\lt // not을 붙이면 그어짐
\times \div \pm \mp x\cdot y
\cup \cap \setminus \subset \subseteq \subsetneq \supset \in \notin \emptyset \varnothing
{n+1 \choose 2k} or \binom{n+1}{2k}
\to \rightarrow \leftarrow \Rightarrow \Leftarrow \mapsto
\land \lor \lnot \forall \exists \top \bot \vdash \vDash
\star \ast \oplus \circ \bullet
\approx \sim \simeq \cong \equiv \prec \lhd \therefore
\infty \aleph_0 \nabla \partial \Im \Re
a\equiv b\pmod n
a_1+a_2+\cdots+a_n
\epsilon \varepsilon \phi \varphi \ell

띄워쓰기

// Mathjax는 띄워쓰기를 해도 따로 인식하지 않음
a\,b // \, thin space
a\;b // \; wider space
a\quad b // large space
a\qqad b

텍스트 쓰기

\{x\in s\mid x\text{ is extra large}\} // 띄워쓰기를 자유롭게 하며 텍스트를 쓰고 싶다면?

악센트 기호

\hat x \widehad xy \overline xyz \vec x \overrightarrow xy \overleftrightarrow xy
\frac d{dx}x\dot x =  \dot x^2 +  x\ddot x

특별한 문자들

// \ $ { 같은 문자들은 문법에 쓰이는 특별한 문자들이기 때문에 \를 이용하여 이스케이프 문자를 사용한다. 단 \은 \\(줄 갱신) 이 아니라 \backslash 를 사용한다.

\$ \{ \_  \backslash \\ x^2

2차원 배열의 표현

$$
\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\
\hline
1 & 0.24 & 1 & 125 \\
2 & -1 & 189 & -8 \\
3 & -20 & 2000 & 1+10i
\end{array}
$$

% outer vertical array of arrays
\begin{array}{c}
% inner horizontal array of arrays
\begin{array}{cc}
% inner array of minimum values
\begin{array}{c|cccc}
\text{min} & 0 & 1 & 2 & 3\\
\hline
0 & 0 & 0 & 0 & 0\\
1 & 0 & 1 & 1 & 1\\
2 & 0 & 1 & 2 & 2\\
3 & 0 & 1 & 2 & 3
\end{array}
&
% inner array of maximum values
\begin{array}{c|cccc}
\text{max}&0&1&2&3\\
\hline
0 & 0 & 1 & 2 & 3\\
1 & 1 & 1 & 2 & 3\\
2 & 2 & 2 & 2 & 3\\
3 & 3 & 3 & 3 & 3
\end{array}
\end{array}
\\
% inner array of delta values
\begin{array}{c|cccc}
\Delta&0&1&2&3\\
\hline
0 & 0 & 1 & 2 & 3\\
1 & 1 & 0 & 1 & 2\\
2 & 2 & 1 & 0 & 1\\
3 & 3 & 2 & 1 & 0
\end{array}
\end{array}

행렬의 표현

$$
    \begin{matrix}
    1 & x & x^2 \\
    1 & y & y^2 \\
    1 & z & z^2 \\
    \end{matrix}
$$

\begin{pmatrix}1&2\\3&4\\ \end{pmatrix}

\begin{bmatrix}1&2\\3&4\\ \end{bmatrix}

\begin{Bmatrix}1&2\\3&4\\ \end{Bmatrix}

\begin{vmatrix}1&2\\3&4\\ \end{vmatrix}

\begin{Vmatrix}1&2\\3&4\\ \end{Vmatrix}

\left[\begin{array}{cc|c}
1&2&3\\
4&5&6
\end{array}\right]

\begin{pmatrix}
 1 & a_1 & a_1^2 & \cdots & a_1^n \\
 1 & a_2 & a_2^2 & \cdots & a_2^n \\
 \vdots  & \vdots& \vdots & \ddots & \vdots \\
 1 & a_m & a_m^2 & \cdots & a_m^n    
 \end{pmatrix}

 \begin{pmatrix}
a & b \\
c & d\\
\hline
1 & 0\\
0 & 1
\end{pmatrix}

$\bigl( \begin{smallmatrix} a & b \\ c & d \end{smallmatrix} \bigr)$

케이스 나누기

f(n) =
\begin{cases}
n/2,  & \text{if $n$ is even} \\
3n+1, & \text{if $n$ is odd}
\end{cases}

\left.
\begin{array}{l}
\text{if $n$ is even:}&n/2\\
\text{if $n$ is odd:}&3n+1
\end{array}
\right\}
=f(n)

취소선 긋기

\require{cancel}\begin{array}{rl}
\verb|y+\cancel{x}| & y+\cancel{x}\\
\verb|\cancel{y+x}| & \cancel{y+x}\\
\verb|y+\bcancel{x}| & y+\bcancel{x}\\
\verb|y+\xcancel{x}| & y+\xcancel{x}\\
\verb|y+\cancelto{0}{x}| & y+\cancelto{0}{x}\\
\verb+\frac{1\cancel9}{\cancel95} = \frac15+& \frac{1\cancel9}{\cancel95} = \frac15 \\
\end{array}

\require{enclose}\begin{array}{rl}
\verb|\enclose{horizontalstrike}{x+y}| & \enclose{horizontalstrike}{x+y}\\
\verb|\enclose{verticalstrike}{\frac xy}| & \enclose{verticalstrike}{\frac xy}\\
\verb|\enclose{updiagonalstrike}{x+y}| & \enclose{updiagonalstrike}{x+y}\\
\verb|\enclose{downdiagonalstrike}{x+y}| & \enclose{downdiagonalstrike}{x+y}\\
\verb|\enclose{horizontalstrike,updiagonalstrike}{x+y}| & \enclose{horizontalstrike,updiagonalstrike}{x+y}\\
\end{array}

글씨에 색 입히기

\begin{array}{|rrrrrrrr|}
\hline
\verb+#000+ & \color{#000}{text} & \verb+#005+ & \color{#005}{text} & \verb+#00A+ & \color{#00A}{text} & \verb+#00F+ & \color{#00F}{text}  \\
\verb+#500+ & \color{#500}{text} & \verb+#505+ & \color{#505}{text} & \verb+#50A+ & \color{#50A}{text} & \verb+#50F+ & \color{#50F}{text}  \\
\verb+#A00+ & \color{#A00}{text} & \verb+#A05+ & \color{#A05}{text} & \verb+#A0A+ & \color{#A0A}{text} & \verb+#A0F+ & \color{#A0F}{text}  \\
\verb+#F00+ & \color{#F00}{text} & \verb+#F05+ & \color{#F05}{text} & \verb+#F0A+ & \color{#F0A}{text} & \verb+#F0F+ & \color{#F0F}{text}  \\
\hline
\verb+#080+ & \color{#080}{text} & \verb+#085+ & \color{#085}{text} & \verb+#08A+ & \color{#08A}{text} & \verb+#08F+ & \color{#08F}{text}  \\
\verb+#580+ & \color{#580}{text} & \verb+#585+ & \color{#585}{text} & \verb+#58A+ & \color{#58A}{text} & \verb+#58F+ & \color{#58F}{text}  \\
\verb+#A80+ & \color{#A80}{text} & \verb+#A85+ & \color{#A85}{text} & \verb+#A8A+ & \color{#A8A}{text} & \verb+#A8F+ & \color{#A8F}{text}  \\
\verb+#F80+ & \color{#F80}{text} & \verb+#F85+ & \color{#F85}{text} & \verb+#F8A+ & \color{#F8A}{text} & \verb+#F8F+ & \color{#F8F}{text}  \\
\hline
\verb+#0F0+ & \color{#0F0}{text} & \verb+#0F5+ & \color{#0F5}{text} & \verb+#0FA+ & \color{#0FA}{text} & \verb+#0FF+ & \color{#0FF}{text}  \\
\verb+#5F0+ & \color{#5F0}{text} & \verb+#5F5+ & \color{#5F5}{text} & \verb+#5FA+ & \color{#5FA}{text} & \verb+#5FF+ & \color{#5FF}{text}  \\
\verb+#AF0+ & \color{#AF0}{text} & \verb+#AF5+ & \color{#AF5}{text} & \verb+#AFA+ & \color{#AFA}{text} & \verb+#AFF+ & \color{#AFF}{text}  \\
\verb+#FF0+ & \color{#FF0}{text} & \verb+#FF5+ & \color{#FF5}{text} & \verb+#FFA+ & \color{#FFA}{text} & \verb+#FFF+ & \color{#FFF}{text}  \\
\hline
\end{array}

다이어그램 그리기

\begin{CD}
A @>a>> B\\
@V b V V= @VV c V\\
C @>>d> D
\end{CD}

\begin{CD}
A @>>> B @>{\text{very long label}}>> C \\
@. @AAA @| \\
D @= E @<<< F
\end{CD}

\begin{CD}
  \text{RCOHR'SO$_3$Na} @>{\text{Hydrolysis, $\Delta,$ Dil. HCl}}>> \text{(RCOR')+NaCl+SO$_2$+ H$_2$O} 
\end{CD}

응용

\begin{align}
\sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\
 & = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\ 
 & = \sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}} \\
 & = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\ 
 & \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right)
\end{align}

$\begin{align} \sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}}
& = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \ & = \sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}}
& = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \ & \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right) \end{align}$

x = a_0 + \cfrac{1^2}{a_1
          + \cfrac{2^2}{a_2
          + \cfrac{3^2}{a_3 + \cfrac{4^4}{a_4 + \cdots}}}}

$x = a_0 + \cfrac{1^2}{a_1 + \cfrac{2^2}{a_2 + \cfrac{3^2}{a_3 + \cfrac{4^4}{a_4 + \cdots}}}}$

\sum_{n=1}^\infty \frac{1}{n^2} \to
  \textstyle \sum_{n=1}^\infty \frac{1}{n^2} \to
  \displaystyle \sum_{n=1}^\infty \frac{1}{n^2}

$\sum_{n=1}^\infty \frac{1}{n^2} \to \textstyle \sum_{n=1}^\infty \frac{1}{n^2} \to \displaystyle \sum_{n=1}^\infty \frac{1}{n^2}$

댓글남기기

참고