--- title: mathjax 깃헙블로그 적용 및 문법 # 오버레이 되는 이미지 및 글 excerpt: 수학 포스팅할때 유용 toc: true toc_label: "목차" toc_icon: "cog" # 내 컨텐츠에 대한 목차를 오른쪽에 띄워줌 use_math: true # mathjax사용 tags: [math,] categories: [Math, default] --- # Mathjax란? [MathJax](https://github.com/mathjax/MathJax)를 사용하면 사이트 내에서 여러 수학 수식들을 사용할 수 있다. ## MathJax 적용 방법 > [이 블로그에서 적용방법 펌](https://mkkim85.github.io/blog-apply-mathjax-to-jekyll-and-github-pages/) ### 마크다운 엔진 변경 `_config.yml` 파일의 내용을 아래와 같이 수정 ``` # Conversion markdown: kramdown highlighter: rouge lsi: false excerpt_separator: "\n\n" incremental: false ``` ### `mathjax_support.html` 파일 생성 `_includes` 디렉토리에 `mathjax_support.html` 파일 생성 후 아래 내용 입력 ``` ``` ### `_layouts/default.html` 파일의 `` 부분에 아래 내용 삽입 {% raw %} ```html {% if page.use_math %} {% include mathjax_support.html %} {% endif %} ``` {% endraw %} ### YAML front-matter 설정 수학식을 표시할 포스트의 front-matter에 `use_math: true` 적용 ```yml --- title: "Jekyll Github 블로그에 MathJax로 수학식 표시하기" tags: - Blog - MathJax - Jekyll - LaTeX use_math: true --- ``` ## 손글씨를 Mathjax 문법으로 바꿔주는 사이트 > [아래 문법들을 익히기 싫다면 사용해보자](http://detexify.kirelabs.org/classify.html) ## Mathjax 문법 정리하다 지친다.. 엌 일단 모아만 두자 > [자세한건 여기서 알아보자!](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference/) > [실제 출력결과를 확인보고 싶다면?](https://www.mathjax.org/#demo) ### 인라인모드(한줄 표현), 인클로즈모드(수식 표현) `$ $`으로 묶어줌으로써 mathjax를 사용한다는 것을 컴퓨터에게 전달합니다. 수식을 인라인형태로 쓸꺼냐. 아웃라인형태로 쓴꺼냐에 따라 두가지 선택지가 있습니다. ``` $ ... $ 형태로 사용 $$ ... $$ 형태로 ``` * $\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$ * $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$ > $$ 여러줄도 가능? \sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} \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}$