블로그(인터넷)에서 LaTeX 수식 입력하기

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

출처: https://kipid.tistory.com/entry/equations-in-html [kipid's blog]

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

// 윗 출처가 더 최신글입니다. (더 잘 정리된)

 

블로그에 물리/수학 관련 이야기를 쓰면서 수식 쓸 일이 많았는데, 해결 방법을 찾았다.

// 아래아한글(hwp), MS-word도 수식입력기를 지원하지만...
// 복사와 편집이 쉬운 LaTeX쪽에서 제공하는 수식이 갑인듯 하다.
// 윈도우에서 이제 (Windows 7부터인가?) 손글씨로 입력한 수식도 인식하고 디지털화 해주는 수식입력기(Math Panel Input)도 기본 프로그램으로 제공한다. (이런 프로그램은 대체 어떻게 짠건지... 후덜덜;; Tablet PC가 대중화되면서 많은 사람들이 이용하기 시작할듯?)

 

---

 

입력 방법에는 대략 아래와 같은 방법들이 있다. 각자 편할데로 골라잡자.

1. 온라인 LaTeX 수식 편집기 이용하기
2. img 태그로 수식 입력하기
3. JavaScript 이용하기

 

---

 

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

온라인으로 LaTeX 수식 편집기를 지원해주는 사이트들이 몇 군데 있다. 이 사이트들에서 제공하는 기능들을 이용하면 블로그나 인터넷 상에 수식을 쓸 수 있다.

그 중 개인적으로 가장 괜찮다고 생각되는 사이트는 CodeCogs: online LaTeX Equation Editor 이다.

Latex 수식을 입력하면 위 그림처럼 아래에 바로 수식이 뜬다. Latex 수식을 잘 모르는 사람도 위의 툴바를 잘 활용하면 대부분의 수식을 쓸 수 있을 것이다. 수식을 다 입력했다면, 가운데 있는 그림을 끌어서 블로그 편집기에 드래그 앤 드롭하면 수식이 들어간다. 이렇게 그림을 끌어서 넣는 경우, 편집기가 WYSIWYG(What You See Is What You Get) 모드여야 한다는데, 다음 블로그는 된다. 안되는 곳이 있다면 이 기회에 갈아타는 것도?

드래그 앤 드롭이 안된다면, 제일 아래에 뜨는 HTML code를 직접 HTML 모드에서 삽입하면 된다. 수식이 작아서 잘 못알아 보겠다면, file type, font, size, resolution 등을 조정하시라~

한가지 단점이 있다면, 저 온라인 수식 편집기 사이트가 폐쇄된다면 더이상 수식이 안보일 거라는 점? -ㅇ-;; 이 단점을 극복하려면, 수식을 따로 저장해서 수식 그림 파일을 직접 올리는 수밖에... 그냥 저 사이트는 죽지 않을거라고 맘편하게 믿고 쓰는게...

테스트:

\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 \\

html

gif

png

pdf

emf

saved png

 

---

 

2. img 태그로 수식 입력하기

가장 간단한 방법이라고 할 수 있다. HTML <img> tag를 이용해서 입력하는 방식이다. 입력된 수식은 제공 사이트에서 처리(rendering)한 뒤 이미지 파일로 쏴주는듯 하다.

방법만 간단히 소개하자면,

<img src="http://latex.codecogs.com/gif.latex?수식" />

위 태그에서 수식 위치에 "LaTeX 수식"을 입력하면 된다.

\begin{split}, \begin{pmatrix} 같은 여러줄 수식도 가능한지는 모르겠다 ㅡ,.ㅡ;; 되는거 같긴한데... 이 사이트에서 통하는 방식이 있고 안되는 방식이 있는듯. 위 태그를 제공하는 사이트는 CodeCogs: online LaTeX Equation Editor 이다. 이 사이트에서 제공하는 메뉴얼 Equations in HTML 도 읽어보시길. "Our servers' daily limit for equation generation is 3,000."라고 하니 방문자가 많은 분들이 쓰기에는 그닥 좋은 방법은 아닌듯? 그 이상 쓰려면 돈 내라고;;; 꽤 많이 사용하실분들은 Usage Policy 도 읽어보시길.

Promoting(홍보):

[예제1]

<img src="http://latex.codecogs.com/gif.latex?
x = y^2 - \sqrt{z} \int_{\alpha = 1}^{2} d\alpha ~ f(\alpha)" />

위 태그를 적용하면 아래와 같이 나타남.

[예제2]

<img src="http://latex.codecogs.com/gif.latex?\dpi{150}
\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*}" />

위 태그를 적용하면 아래와 같이 나타남.

[예제3]

<img src="http://latex.codecogs.com/gif.latex?\dpi{150}
\eta_{\mu \nu} =
\begin{bmatrix}
-1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\
0 & 0 & 1 & 0 \\
0 & 0 & 0 & 1
\end{bmatrix}" />

위 태그를 적용하면 아래와 같이 나타남.

 

---

 

3. JavaScript 이용하기

 

---

 

LaTeX 관련글들:
- 간단한 LaTeX 편집, 수식입력기
- LaTeX(라텍스, 레이텍) 소개 및 설명서(Guide)들

- http://www.mathjax.org/
- [EM turtle]: LaTex 수식을 그림으로 만드는 방법
- 블로그(티스토리 및 다른 블로그)에서 LaTeX 수식 입력하기