본문 바로가기

[IT/Programming]/HTML related

인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog)

반응형

인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog)

블로그에 물리/수학 관련 이야기를 쓰면서 수식 쓸 일이 많았는데, 해결 방법을 찾았다. 아래아한글 (hwp), MS-word도 수식입력기를 지원하지만, 복사와 편집이 쉬운 plain text 형태의 LaTeX 수식이 갑인듯 하다. 입력 방법에는 대략 아래와 같은 방법들이 있다. 각자 편할데로 골라잡자.
윈도우에서는 (Windows 7부터인가?) 손글씨로 입력한 수식도 인식하고 디지털화 해주는 수식입력기 (Math Panel Input) 도 기본 프로그램으로 제공한다. 이런 프로그램은 대체 어떻게 짠건지... 후덜덜;; Tablet PC가 대중화되면서 많은 사람들이 이용하기 시작할듯? 손으로 쓸때는 그냥 그림파일로 저장하는게 맘편하긴 하지만... (수식이 복잡해지면 처리하는데도 느릴거고 오류라도 나면 수정해주는 작업이 더 귀찮을듯도 해서... 더 발전한다면야 99% 인식률을 보일수도 있으니 쓰겠지만 =ㅇ=;;;)

Posting History

  • 2014-06-12: docuK upgrade.
  • 2014-06-11: docuK update. 조금 더 정리. Try it yourself 추가.
  • 2014-04-20: docuK format으로 변경. eq/eqq tag만 주석처리.
  • 2014-02-06: First posting?

Table of Contents

Try it yourself

LaTeX Math 문법을 아시는 분들은 바로 테스트 해 보시길. 잘 모르시더라도 CodeCogs toolbar를 활용하시면 대부분의 수식을 작성하실 수 있으실거예요.

CodeCogs


Math image:

MathJax

Type LaTeX Math:

Math rendered by MathJax:
\[ \alpha\beta\gamma\omega \]

Opening Source

위에 구현해놓은 것들 html code 입니다. 고칠 부분이 보이면 알려주시고, 더 향상시켜서 (디자인/성능/기능 등) 다시 알려주시면 제가 좋아라 할듯.

	

Javascript 고 모고 다 어렵다. 쉽게 수식 쓰고 싶다 하시는 분들은...

Javascript 고 모고 다 어렵다. 쉽게 수식 쓰고 싶다 하시는 분들은... 제가 만든 Markdown 언어인 DocuK SEE (Super Easy Edit) 사용해 보시길... 그냥 <eq>, <eqq> tag 에 LaTeX 수식 넣어서 쓰시기만 하면 됨. 현재 이 문서도 docuK 로 작성되었음.
\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) $\leftarrow$ inline math and outline math $\rightarrow$ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) 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} } } }
좌우에 \\ ( \\ ) \\ [ \\ ] 가 붙은건 이 페이지에서 eq, eqq tag 를 이중으로 처리했기 때문인데... 고치기가 귀찮;;;

온라인 LaTeX 수식 편집기 이용하기

온라인으로 LaTeX 수식 편집기를 지원해주는 사이트들이 몇 군데 있다. 이 사이트들에서 제공하는 기능들을 이용하면 블로그나 인터넷 상에 수식을 쓸 수 있다. 그 중 개인적으로 가장 괜찮다고 생각되는 사이트는 CodeCogs: Online LaTeX Equation Editor (New version) 이다.
CodeCogs: Online LaTeX Equation Editor
위 section 에서 바로 테스트 해 보시길.
Latex 수식을 입력하면 위 그림처럼 아래에 바로 수식이 뜬다. Latex 수식을 잘 모르는 사람도 위의 툴바를 잘 활용하면 대부분의 수식을 쓸 수 있을 것이다. 수식을 다 입력했다면, 가운데 있는 그림을 끌어서 블로그 편집기에 drag and drop(드래그 앤 드롭)하면 수식이 들어간다. 이렇게 그림을 끌어서 넣는 경우 편집기가 WYSIWYG(What You See Is What You Get) 모드여야 한다는데, 요새 대부분의 블로그에서는 지원된다.
드래그 앤 드롭이 안된다면, 제일 아래에 뜨는 HTML code를 직접 HTML 모드에서 삽입하면 된다. 수식이 작아서 잘 못알아 보겠다면, file type, font, size, resolution 등을 조정해서 크기를 키우면 된다. 한가지 단점이 있다면, 저 온라인 수식 편집기 사이트가 폐쇄된다면 더이상 수식이 안보일 거라는 점? -ㅇ-;; 이 단점을 극복하려면, 수식을 따로 저장해서 수식 그림 파일을 직접 올리는 수밖에... 그냥 저 사이트는 죽지 않을거라고 맘편하게 믿고 쓰는게...
Daum Equation Editor도 어느정도는 괜찮은듯 합니다, font가 좀 맘에 안들고 option들이 별로 없다는게 단점인듯 하지만... Tistory에서도 기본 수식 입력기는 이걸 사용하네요.

HTML의 img 태그로 수식 입력하기

가장 간단한 방법이라고 할 수 있다. HTML의 <img> tag를 이용해서 입력하는 방식이다. (따라서 수식을 많이 쓸 경우는 불편할 수 있다.) 입력된 수식은 수식제공 사이트에서 처리(rendering)한 뒤 이미지 파일로 쏴주는듯 하다. 위의 드래그 앤 드롭하고 같은 사이트(CodeCogs: Online LaTeX Equation Editor)를 이용하는 것인데, html에서 code적으로 처리한다고 보면 된다.
방법을 간단히 소개하자면,
<img src="https://latex.codecogs.com/svg.latex?수식"/>
위 태그에서 수식 위치에 "LaTeX 수식"을 입력하면 된다. svg는 'file type: scalable vector graphic'을 의미한다. svg 대신 png나 gif 등의 그림 file type을 선택해도 되긴하는데, svg가 확대/축소에도 깨지지 않아서 괜찮은 옵션같다. (아직 svg에 대해 제대로 공부를 안해서 잘은 모르겠고... HTML5에서 그림 그릴때도 쓰이는 듯.)
<img src="https://latex.codecogs.com/(file type).latex? \options 수식"/>
위와 같이 여러가지 옵션들도 적용해서 쓸 수 있다. 수식을 여러줄로 입력해도 알아서 잘 처리해 준다. 사이트에서 직접 수식을 입력하면 아래쪽에 html 코드를 주는데, file type, font, size, resolution 등을 조정해 가면서 html code가 어떻게 변하는지 보면 이러한 설정들도 어떻게 바꿀 수 있는지 금방 파악 가능하다. (svg file type에서는 black background가 지원이 안되는듯해서 아래 예제들에서는 png를 사용.)

[예제 2-1]

<img src="https://latex.codecogs.com/png.latex?\dpi{150}\bg_black x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}"/>

[예제 2-2]

<img src="https://latex.codecogs.com/png.latex?\dpi{150}\bg_black f(a)=\frac{1}{2\pi i}\oint_\gamma \frac{f(z)}{z-a}dz"/>

[예제 2-3]

글자와 같이 <img style="vertical-align:top or middle or bottom" src="https://latex.codecogs.com/png.latex?\dpi{150}\bg_black x = y^2 - \sqrt{z} \int_{\alpha = 1}^{2} d\alpha ~ f(\alpha)"/> 쓰였을 때. (vertical-align:top)
글자와 같이 <img style="vertical-align:middle" src="https://latex.codecogs.com/png.latex?\inline \dpi{150}\bg_black x = y^2 - \sqrt{z} \int_{\alpha = 1}^{2} d\alpha ~ f(\alpha)"/> 쓰였을 때.
글자와 같이 쓰였을 때. (vertical-align:top)
글자와 같이 쓰였을 때. (vertical-align:middle)
글자와 같이 쓰였을 때. (vertical-align:bottom)
글자와 같이 쓰였을 때.

[예제 2-4]

글자와 같이 <img style="vertical-align:middle" src="https://latex.codecogs.com/png.latex?\dpi{150}\bg_black \begin{align*}
\vec{x}
&= x^{\bar{i}} \vec{e}_{\bar{i}} = x \vec{e}_x + y \vec{e}_y + z \vec{e}_z \\
&= x^{i} \vec{e}_{i} = r \vec{e}_r + \theta \vec{e}_{\theta} + \phi \vec{e}_{\phi} \\
&= x^{i'} \vec{e}_{i'} = u \vec{e}_u + v \vec{e}_v + w \vec{e}_w
\end{align*}
"
/> 쓰였을 때.
글자와 같이 쓰였을 때.

[예제 2-5]

글자와 같이 <img style="vertical-align:middle" src="https://latex.codecogs.com/png.latex?\dpi{150}\bg_black \eta_{\mu \nu} =
\begin{bmatrix}
-1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\
0 & 0 & 1 & 0 \\
0 & 0 & 0 & 1
\end{bmatrix}
"
/> 쓰였을 때.
글자와 같이 쓰였을 때.
색(color) 옵션이나 background, font 등의 옵션이 많지 않아서 아쉽긴 하다. 수식이 글자와 같이 쓰였을 때에도 깔끔하게 잘 보이는 듯? 조금 엄밀하게 따지면 그림수식(equation image)의 중간(vertical middle)이 글자와 일치할때만 자연스럽게 보이는데, g나 f같은 수식만 달랑 오면 제대로 정렬이 안될듯도. inline 수식 때문에 글자 간격도 약간씩 깨질때가 있어서 신경 쓰이기도 한다. 뭐 이런것들이 큰 단점은 아니겠지만, 뭔가 아쉽긴 하다. Black background를 쓰니까 조금 흐릿해져서 보기좋지 않은듯도 하다.

JavaScript 이용하기

Javascript를 조금 다룰 줄 안다면 일일이 img 태그를 입력하는 수고를 덜 수도 있다. 아니면 아예 javascript를 제공하는 MathJax를 사용하는 방법도 있다.

CodeCogs img tag를 javascript로 처리하기

<eq>, <eqq> tag들로 수식을 작성하고 아래와 같이 javascript를 마지막에 추가하면 된다. (script 뒤에 있는 eq, eqq tag들은 처리 안된다.)

		
<eq>\alpha\beta</eq>을 입력하면, \alpha\beta처럼 자동으로 변환되고,
<eqq>\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) 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} } } }</eqq>

을 입력하면, \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) 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} } } }처럼 처리된다.
script 뒤에 있는 tag들은 동작 안함. <eq>\alpha\beta</eq>을 입력하면, \alpha\beta처럼 그대로 TeX equation code가 나타남. 따라서 script는 가장 뒤에 넣읍시다.

MathJax의 javascript를 이용하기

MathJax를 사용하면 수식이 html내에서 문자로 처리되어서 깔끔하게 보이기도 하고 따로 html tag를 적용시키기도 좋긴한데, 방문자가 매번 페이지를 열때마다 브라우저가 처리(rendering)를 해야만 수식이 제대로 보인다는 단점이 있기도 하다. 이 rendering이란게 꽤나 시간을 잡아먹기 때문에 이런 단점은 수식이 많을때 더 치명적이다. (수식이 많이 들어가는 경우 delayed(lazy)-loading을 생각해봐야. 기본적으로 MathJax가 지원해주고 있지는 않아서 골치가 좀 아플듯.) 그래도 장점 (html/css로 처리되기 때문에 깔끔) 도 많으니 가장 추천하는 방법이기도 하다.
뭐 자잘한 option들은 무시하고 아래와 같이 MathJax JavaScript를 secure (https) CDN (Content Delivery Network) 에서 추가한다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.6.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<!-- 이전 CDN (cdn.rawgit.com) 이 죽었음. -->
이제 html안에서 inline 수식은 '\ ('와 '\ )' 사이, block 수식은 '\ ['와 '\ ]' 사이에 넣으면 된다. LaTeX에서 inline 수식으로 자주 사용되는 '\$'는 웹 상에서는 다른 용도 (dollar 혹은 jQuery 변수) 로도 많이 쓰이기 때문에 수식기본옵션에서는 제외되어 있어서 수식으로 처리해주지 않는다. 되도록 LaTeX에서도 '\ (', '\ )'를 쓰자, 시작과 끝을 확실히 구분해줘서 error가 생길 가능성을 줄여주니. '\$'도 수식으로 먹혀서 처리되게 설정을 바꿀수도 있긴하니 굳이 '\$'로 수식을 표현하겠다는 분은 찾아보시길. 대충은 아래와 같이 쓰면 됨. (확실히 tex 환경에서 '\$'로 수식처리하는게 편하긴 한데... Inline 수식을 쓸때마다 '\ (', '\ )'를 쓰려니 여간 귀찮을수가... 키보드 두드리는 횟수차이가 엄청남.)
<script>
window.MathJax={
	startup: {
		typeset: false, // Skip startup typeset.
		ready: function () {
			m.logPrint('<br><br>MathJax is loaded, but not yet initialized.');
			MathJax.startup.defaultReady();
			m.logPrint('<br><br>MathJax is initialized, and the initial typeset is queued.');
		}
	},
	asciimath: {
		delimiters: [['\$','\$']] // AsciiMath to Jax
	},
	tex: {
		inlineMath: [['\$','\$'], ['\\\\(','\\\\)']], // Using \$ for inline math.
		displayMath: [['\$\$','\$\$'], ['\\\\[','\\\\]']], // Using \$\$ for outline math.
		processEscapes: true, // Escape \\$
		processEnvironments: false // Ignore \\begin{something} ... \\end{something}
	},
	svg: {
		fontCache: 'global'
	}
};
</script>
수식을 \(\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)\) 써볼까나? \[\begin{aligned} \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{aligned}\] Long equations overflow div block. 이런 경우 css를 잘 조정해줘야 화면을 벗어난 수식도 잘 보여주는듯. Mobile에서도 잘 보일래나? \[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$}.\] \[\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}\]
MathJax를 이용하는 경우에도 태그를 이용해서 처리 가능하다. 조금 더 간략히하기 위해 jQuery를 이용, 아래와 같이 javascript문을 추가로 넣으면 된다. 수식에 자동으로 numbering이 되도록도 할수있긴 한데, 여기서 이것까지 설명하면 복잡해질듯 하니 ref 문서를 참조하시길 .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($){
	let eqqs=$("eqq");
	for(j=0;j<eqqs.length;j++){
		eqqs.eq(i).html(function(ith,orgTxt){return "\\[ "+orgTxt.trim()+" \\]";});
	}
	let eqs=$("eq");
	for (i=0;i<eqs.length;i++){
		eqs.eq(i).html(function(ith,orgTxt){return "\\( "+orgTxt.trim()+" \\)";});
	}
})(jQuery); // 간단히 그냥 MathJax가 수식인 것을 알아채도록 [\(, \)], [\{, \}]로 감싸준것.
</script>

Examples of MathJax Equations with auto numbered

개인적으로 만들어놓은 auto equation numbering and Delayed (Lazy) MathJax rendering.
J_\alpha(x) = \sum\limits_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + \alpha + 1)}{\bigl({\frac{x}{2}}\bigr)}^{2 m + \alpha}
MathML math is rendered or not?
f ( a ) = 1 2 π i γ f ( z ) z a d z
The Lorenz Equations \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}
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)
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}
The probability of getting $k$ heads when flipping $n$ coins is P(E) = {n \choose k} p^k (1-p)^{ n-k}
An Identity of Ramanujan \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) 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$}.
Maxwell’s Equations \begin{aligned} \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{aligned}
This expression $3x^2$$+5x$$-5\sqrt{x-5}$$+ (1-x)^2$ is an example of an inline equation.

References and Related Articles

    Math Renderer

  1. CodeCogs: Online LaTeX Equation Editor;
    // 깔끔한 온라인 LaTeX 수식 편집기. 툴바들이 잘 되어 있어서 LaTeX math 명령어들을 몰라도 손쉽게 수식을 작성할 수 있음. 이 사이트에서 제공하는 메뉴얼 Equations in HTML도 읽어보시길. "Our servers' daily limit for equation generation is 3,000."라고 하니 방문자가 많은 분들이 쓰기에는 그닥 좋은 방법은 아닌듯 하기도. 그 이상 쓰려면 돈 내라고;;; image들을 이 서버에서 쏴주는 식이라 그런듯. 꽤 많이 사용하실분들은 Usage Policy도 읽어보시길.
    Promoting image: CodeCogs - An Open Source Scientific Library
  2. MathJax.org - Beautiful math in all browsers; and Getting started; and Loading and Configuring MathJax; and The Core Configuration Options; and Terms of service;
    and MathJax Documentation - latest; and The Core Configuration Options; and The MathJax.Hub Object;
    // LaTeX 형태의 수식도 표현해주고 MathML 형태의 수식(Mathematica랑 MS word 등에서 쓰이는 수식 code인듯? more machine-readable이라고. 최신 browser에서 MathML은 자동으로 처리해주는듯도. HTML/XML이랑 비슷한.), AsciiMath도 표현해 준다고 함.
    // CodeCogs보다 옵션들도 많고 더 좋아보이기도 하는데, 제대로 사용하려면 JavaScript도 어느정도는 알아야하고 공부가 조금 필요한듯.
    Promoting image:
  3. Daum Equation Editor;
    '다음'에서도 LaTeX Equation Editor(tistory도 이것을 이용)를 제공하긴 하는데, text code를 바로 처리해주는 기능은 없는듯해서... 수식그림내에서도 수식을 편집할 수 있다는 장점은 있네요.
  4. Detexify\(^2\) - LaTeX symbol classifier;
    // 오유 '살얼음'님이 알려주심. 여긴 그림을 그리면 LaTeX 수식으로 알려주는듯. 신기방기.
  5. Related

  6. argente's blog - 블로그(티스토리 및 다른 블로그)에서 LaTeX 수식 입력하기;
    // 여기서 처음 배웠음. JavaScript를 조금 더 깔끔하게 만들수도 있을거 같긴한데... (이땐 JavaScript를 거의 몰랐을때라 대충 썼던 기억이. 제가 만든 JavaScript code가 더 깔끔할듯.)
  7. EM turtle(전파거북이)'s blog - LaTex 수식을 그림으로 만드는 방법;
    // 매우 훌륭한 수학/물리 관련 글들을 많이 올려놓으셨는데, 아예 수식을 직접 그림파일로 올려서 수식을 지원하는 사이트들이 죽어도 상관없게끔 하신듯. 난 귀찮아서라도 이렇게까진 못할듯;;; 대단하신 분. 아마도 예전에는 수식을 지원해주는 사이트의 도움을 받다가 이 사이트가 죽으면서 수식이 다 깨지니 아예 방법을 이렇게 바꾸신듯도.
  8. Etc.

  9. kipid's blog - HTML docuK format ver. 2.3;
    Super Easy Edit (SEE) of docuK;
    // 자동으로 수식에 numbering이 되도록 만든 html 문서. 다른 section numbering이나 table of contents 등의 기능들도 구현해놨으니 참고해 보시길.
  10. kipid's blog - LaTeX(라텍스, 레이텍) 소개 및 설명서(Guide)들;
    // LaTeX가 무엇인지 궁금하시다면 방문해 보시길.
반응형