[물리·과학·IT]

kipid 2013. 1. 12. 16:17

인터넷, 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)

인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog) 블로그에 물리/수학 관련 이야기를 쓰면서 수식 쓸 일이 많았는데, 해결 방법을 찾았다. 아래아한글 (hwp), MS-word도 수식입력

kipid.tistory.com

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

 

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

// 아래아한글(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(홍보): CodeCogs - An Open Source Scientific Library

[예제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 이용하기

 


 

https://kipid.tistory.com/entry/equations-in-html