티스토리에서 수학 수식 표현식 쓰려면

티스토리에서 딥러닝 기초수학 정리하는데 수학 수식 입력을 할수가 없어서 방법을 찾아서 글 씁니다

이 방법을 적용 후 사용하다가 티스토리 스킨을 변경하면 수학 수식 표현이 안되고 다시 설정해줘야 해요

 

MathJax 라는 오픈소스 javascript 라이브러리를 사용할 거예요

MathJax 를 이용하면 웹브라우저 에서 수학 수식 표현이 가능해요

TeX 및 LaTeX 표기법, MathML, 또는 AsciiMath 표기법을 사용해 수학 공식, 수학식을 작성할 수 있어요

 

 

1. 스킨 편집

티스토리 설정 > 꾸미기 > 스킨 편집 으로 이동하세요

 

2. html 편집

스킨 편집 내 html 편집 으로 이동하세요

 

3. MathJax 코드 추가

head 태그 내 마지막 부분에 아래 코드를 넣어주세요

</head> 태그 위요

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

 

4. 적용

MathJax 코드 입력 후 적용합니다

이제 사용하면 됩니다

 

5. 글쓰기

수학 수식이 포함된 글쓰기

---

글쓰기 예제

When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

    When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
    $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

---

글쓰기 예제 The Lorenz Equations

\begin{align}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{align}

    \begin{align}
    \dot{x} & = \sigma(y-x) \\
    \dot{y} & = \rho x - y - xz \\
    \dot{z} & = -\beta z + xy
    \end{align}

---

글쓰기 예제  The Cauchy-Schwarz Inequality

\[
\left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
\left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
\]

    \[
    \left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
     \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
    \]

---

글쓰기 예제  A Cross Product Formula

\[
  \mathbf{V}_1 \times \mathbf{V}_2 =
   \begin{vmatrix}
    \mathbf{i} & \mathbf{j} & \mathbf{k} \\
    \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
    \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
   \end{vmatrix}
\]

    \[
      \mathbf{V}_1 \times \mathbf{V}_2 =
       \begin{vmatrix}
        \mathbf{i} & \mathbf{j} & \mathbf{k} \\
        \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
        \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
       \end{vmatrix}
    \]

---

글쓰기 예제  The probability of getting \(k\) heads when flipping \(n\) coins is:

\[P(E) = {n \choose k} p^k (1-p)^{ n-k} \]

    \[P(E) = {n \choose k} p^k (1-p)^{ n-k} \]

---

글쓰기 예제  An Identity of Ramanujan

\[
       \frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} =
         1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
          {1+\frac{e^{-8\pi}} {1+\ldots} } } }
\]

    \[
       \frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} =
         1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
          {1+\frac{e^{-8\pi}} {1+\ldots} } } }
    \]

---

글쓰기 예제  A Rogers-Ramanujan Identity

\[
      1 +  \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
        \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
         \quad\quad \text{for $|q| < 1$}.
\]

    \[
      1 +  \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
        \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
         \quad\quad \text{for $|q| < 1$}.
    \]

---

글쓰기 예제  Maxwell's Equations

\begin{align}
      \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\
      \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
      \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
      \nabla \cdot \vec{\mathbf{B}} & = 0
\end{align}

    \begin{align}
      \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\
      \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
      \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
      \nabla \cdot \vec{\mathbf{B}} & = 0
    \end{align}

---

글쓰기 예제  In-line Mathematics

Finally, while display equations look good for a page of samples, the
ability to mix math and text in a paragraph is also important.  This
expression $\sqrt{3x-1}+(1+x)^2$ is an example of an inline equation.  As
you see, MathJax equations can be used this way as well, without unduly
disturbing the spacing between lines.

    Finally, while display equations look good for a page of samples, the
    ability to mix math and text in a paragraph is also important.  This
    expression $\sqrt{3x-1}+(1+x)^2$ is an example of an inline equation.  As
    you see, MathJax equations can be used this way as well, without unduly
    disturbing the spacing between lines.

 

 

---

MathJax 추가 설명

MathJax 사용을 위해 추가한 코드에 대한 추가 설명이예요

브라우저 호환성

모든 최신 브라우저(Chrome, Safari, Firefox, Edge)와 대부분의 모바일 브라우저를 지원하기 위해 다음 한줄이 필요해요

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

 

수학 입력 구분 기호 설정

수학 구분 기호로 단일 달러 기호 \$...\$ 와 역슬래시-괄호 \\\\(...\\\\) 를 설정하는 겁니다

이 부분에서 설정한 수학 구분 기호 뿐 아니라 LaTeX 수학 구분 기호 도 처리함

\\begin{equation}...\\end{equation}, \\begin{matrix}...\\end{matrix}, \\\\[...\\\\] 등

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};

 

MathJax 사용

CDN 서비스에서 최신 버전의 MathJax를 로드합니다

<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

 

 

LaTeX equation editor

Equation Editor for online mathematics - create, integrate and download

 

 

Reference

https://docs.mathjax.org/

https://cdnjs.com/libraries/mathjax

http://www.mathjax.org/