Physicist, Programmer. What you eat, how you think, and most importantly what you have done become who you are. Who are you? and who will you be?
[IT/Programming]/HTML related
인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog)
kipid2024. 8. 30. 09:49
728x90
반응형
# 인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog)
블로그에 물리/수학 관련 이야기를 쓰면서 수식 쓸 일이 많았는데, 해결 방법을 찾았다. 아래아한글 (hwp), MS-word도 수식입력기를 지원하지만, 복사와 편집이 쉬운 plain text 형태의 LaTeX 수식이 갑인듯 하다. 입력 방법에는 대략 아래와 같은 방법들이 있다. 각자 편할데로 골라잡자.
윈도우에서는 (Windows 7부터인가?) 손글씨로 입력한 수식도 인식하고 디지털화 해주는 수식입력기 (Math Panel Input) 도 기본 프로그램으로 제공한다. 이런 프로그램은 대체 어떻게 짠건지... 후덜덜;; Tablet PC가 대중화되면서 많은 사람들이 이용하기 시작할듯? 손으로 쓸때는 그냥 그림파일로 저장하는게 맘편하긴 하지만... (수식이 복잡해지면 처리하는데도 느릴거고 오류라도 나면 수정해주는 작업이 더 귀찮을듯도 해서... 더 발전한다면야 99% 인식률을 보일수도 있으니 쓰겠지만 =ㅇ=;;;)
## PH
2024-08-29 : To SEE.
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?
## TOC
##[.no-sec-N#sec-Try-It-Yourself] Try it yourself
LaTeX Math 문법을 아시는 분들은 바로 테스트 해 보시길. 잘 모르시더라도 CodeCogs toolbar를 활용하시면 대부분의 수식을 작성하실 수 있으실거예요.
###[#subsec-sec-Try-It-Yourself-1] editor.codecogs.com
###[#subsec-sec-Try-It-Yourself-3] Opening Source
위에 구현해놓은 것들 html code 입니다.
```[#pre-code-test-it.scrollable.lant-html]
### editor.codecogs.com
<div id="toolbar">
<div id="latexInput">
<img id="output"/>
### MathJax
<div class="p" style="display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:.8em">
<span>Type LaTeX Math:</span>
<textarea id="mathJax-LatexInput" style="max-width:100%; font:inherit; width:35em; height:5em">\alpha \beta \gamma \omega \int_a^b \sum_c^d</textarea>
<span>Math rendered by MathJax:</span>
<div id="mathJax-LatexOutput">\ [ \alpha \beta \gamma \omega \int_a^b \sum_c^d \ ]</div>
</div>
```/
```[#pre-code-mathjax.scrollable.lang-html]
```/
## 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: Equation Editor for online mathematics 이다.
위 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적으로 처리한다고 보면 된다.
방법을 간단히 소개하자면,
위 태그에서 수식 위치에 "LaTeX 수식"을 입력하면 된다. svg는 'file type: scalable vector graphic'을 의미한다. svg 대신 png나 gif 등의 그림 file type을 선택해도 되긴하는데, svg가 확대/축소에도 깨지지 않아서 괜찮은 옵션같다. (아직 svg에 대해 제대로 공부를 안해서 잘은 모르겠고... HTML5에서 그림 그릴때도 쓰이는 듯.)
위와 같이 여러가지 옵션들도 적용해서 쓸 수 있다. 수식을 여러줄로 입력해도 알아서 잘 처리해 준다. 사이트에서 직접 수식을 입력하면 아래쪽에 html 코드를 주는데, file type, font, size, resolution 등을 조정해 가면서 html code가 어떻게 변하는지 보면 이러한 설정들도 어떻게 바꿀 수 있는지 금방 파악 가능하다. (svg file type에서는 black background가 지원이 안되는듯해서 아래 예제들에서는 png를 사용.)
색(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들은 처리 안된다.)
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) 에서 추가한다.
```[.linenums]
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
```/
이제 html 안에서 inline 수식은 '\ ('와 '\ )' 사이, block 수식은 '\ ['와 '\ ]' 사이에 넣으면 된다. LaTeX 에서 inline 수식으로 자주 사용되는 '\$'는 웹 상에서는 다른 용도 (dollar 혹은 jQuery 변수) 로도 많이 쓰이기 때문에 수식기본옵션에서는 제외되어 있어서 수식으로 처리해주지 않는다. 되도록 LaTeX 에서도 '\ (', '\ )'를 쓰자, 시작과 끝을 확실히 구분해줘서 error 가 생길 가능성을 줄여주니.
```[.linenums]
<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.');
}
},
tex: {
inlineMath: [['\\\\(','\\\\)']],
displayMath: [['\\\\[','\\\\]']],
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 문서를 참조하시길 .
```[.linenums]
<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}
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.
## RRA
EM turtle(전파거북이)'s blog - LaTex 수식을 그림으로 만드는 방법;
// 매우 훌륭한 수학/물리 관련 글들을 많이 올려놓으셨는데, 아예 수식을 직접 그림파일로 올려서 수식을 지원하는 사이트들이 죽어도 상관없게끔 하신듯. 난 귀찮아서라도 이렇게까진 못할듯;;; 대단하신 분. 아마도 예전에는 수식을 지원해주는 사이트의 도움을 받다가 이 사이트가 죽으면서 수식이 다 깨지니 아예 방법을 이렇게 바꾸신듯도.
)
쓰였을 때. (vertical-align:top))
쓰였을 때.
쓰였을 때.
쓰였을 때.
