본문 바로가기

ETC/Tips

티스토리에 latex 수식넣기

표 1: 수학 모드의 액센트 기호.
ˆa \hat{a} ˇa \check{a} ˜a \tilde{a} ´a \acute{a}
`a \grave{a} ˙a \dot{a} ¨a \ddot{a} ˘a \breve{a}
¯a \bar{a} ⃗a \vec{a} b A \widehat{A} e A \widetilde{A}

표 2: 그리스 문자 소문자.
α \alpha θ \theta o o υ \upsilon
β \beta ϑ \vartheta π \pi φ \phi
γ \gamma ι \iota ϖ \varpi ϕ \varphi
δ \delta κ \kappa ρ \rho χ \chi
ϵ \epsilon λ \lambda ϱ \varrho ψ \psi
ε \varepsilon μ \mu σ \sigma ω \omega
ζ \zeta ν \nu ς \varsigma
η \eta ξ \xi τ \tau

표 3: 그리스 문자 대문자.
Γ \Gamma Λ \Lambda Σ \Sigma Ψ \Psi
Δ \Delta Ξ \Xi Υ \Upsilon Ω \Omega
Θ \Theta Π \Pi Φ \Phi

표 4: Binary Relations.
다음 부호에는 \not 명령을 앞에 붙여서 부정 기호로 만들 수 있다.
< < > > = =
≤ \leq or \le ≥ \geq or \ge ≡ \equiv
≪ \ll ≫ \gg .=
\doteq
. \prec . \succ ∼ \sim
. \preceq . \succeq . \simeq
⊂ \subset ⊃ \supset . \approx
⊆ \subseteq ⊇ \supseteq ∼=
\cong
@ \sqsubset a A \sqsupset a on \Join a
⊆ \sqsubseteq ⊇ \sqsupseteq .. \bowtie
∈ \in ∋ \ni , \owns ∝ \propto
. \vdash . \dashv |= \models
| \mid ∥ \parallel ⊥ \perp
. \smile . \frown . \asymp
: : /∈
\notin .= \neq or \ne
aUse the latexsym package to access this symbol

표 5: Binary Operators.
+ + . -
± \pm . \mp . \triangleleft
· \cdot ÷ \div . \triangleright
× \times \ \setminus . \star
∪ \cup ∩ \cap . \ast
. \sqcup . \sqcap . \circ
∨ \vee , \lor ∧ \wedge , \land . \bullet
. \oplus . \ominus . \diamond
⊙ \odot . \oslash . \uplus
. \otimes . \bigcirc . \amalg
△ \bigtriangleup ▽ \bigtriangledown † \dagger
C \lhd a B \rhd a ‡ \ddagger
E \unlhd a D \unrhd a . \wr

표 7: 화살표.
← \leftarrow or \gets ←. \longleftarrow ↑ \uparrow
→ \rightarrow or \to .→ \longrightarrow ↓ \downarrow
↔ \leftrightarrow ←→ \longleftrightarrow ↕ \updownarrow
. \Leftarrow .= \Longleftarrow . \Uparrow
⇒ \Rightarrow =⇒ \Longrightarrow . \Downarrow
⇔ \Leftrightarrow .⇒ \Longleftrightarrow . \Updownarrow
7→ \mapsto 7.→ \longmapsto ↗ \nearrow
←- \hookleftarrow ,→ \hookrightarrow ↘ \searrow
. \leftharpoonup . \rightharpoonup ↙ \swarrow
. \leftharpoondown . \rightharpoondown ↖ \nwarrow
­ \rightleftharpoons .⇒ \iff (bigger spaces) A \leadsto a
aUse the latexsym package to access this symbol

표 8: 짝맞춤 문자(Delimiters).
( ( ) ) ↑ \uparrow . \Uparrow
[ [ or \lbrack ] ] or \rbrack ↓ \downarrow . \Downarrow
{ \{ or \lbrace } \} or \rbrace ↕ \updownarrow . \Updownarrow
. \langle . \rangle | | or \vert ∥ \| or \Vert
. \lfloor . \rfloor . \lceil . \rceil
/ / \ \backslash . (dual. empty)

표 10: 그밖의 기호.
. . . \dots · · · \cdots
...
\vdots
. . . \ddots
~ \hbar ı \imath . \jmath ℓ \ell
. \Re . \Im . \aleph . \wp
∀ \forall ∃ \exists f \mho a ∂ \partial
′ ’ ′ \prime . \emptyset ∞ \infty
∇ \nabla △ \triangle ¤ \Box a § \Diamond a
⊥ \bot . \top \ \angle
\surd
. \diamondsuit ♥ \heartsuit ♣ \clubsuit ♠ \spadesuit
¬ \neg or \lnot ♭ \flat . \natural . \sharp
aUse the latexsym package to access this symbol

표 11: Non-Mathematical Symbols.
다음 기호들은 텍스트 모드에서도 사용할 수 있다.
. \dag § \S ⓒ \copyright ® \textregistered
. \ddag ¶ \P £ \pounds % \%

표 14: AMS Binary Relations.
l \lessdot m \gtrdot + \doteqdot or \Doteq
6 \leqslant > \geqslant : \risingdotseq
0 \eqslantless 1 \eqslantgtr ; \fallingdotseq
5 \leqq = \geqq P \eqcirc
n \lll or \llless o \ggg or \gggtr $ \circeq
. \lesssim & \gtrsim , \triangleq
/ \lessapprox ' \gtrapprox l \bumpeq
7 \lessgtr ? \gtrless m \Bumpeq
Q \lesseqgtr R \gtreqless s \thicksim
S \lesseqqgtr T \gtreqqless t \thickapprox
4 \preccurlyeq < \succcurlyeq u \approxeq
2 \curlyeqprec 3 \curlyeqsucc v \backsim
- \precsim % \succsim w \backsimeq
w \precapprox v \succapprox ² \vDash
j \subseteqq k \supseteqq ° \Vdash
b \Subset c \Supset ± \Vvdash
@ \sqsubset A \sqsupset \backepsilon
) \therefore * \because _ \varpropto
p \shortmid q \shortparallel G \between
` \smallsmile a \smallfrown t \pitchfork
C \vartriangleleft B \vartriangleright J \blacktriangleleft
E \trianglelefteq D \trianglerighteq I \blacktriangleright

표 15: AMS Arrows.
L99 \dashleftarrow 99K \dashrightarrow ( \multimap
μ \leftleftarrows ¶ \rightrightarrows · \upuparrows
¿ \leftrightarrows A \rightleftarrows ¸ \downdownarrows
W \Lleftarrow V \Rrightarrow ≫ \upharpoonleft
´ \twoheadleftarrow ³ \twoheadrightarrow ¹ \upharpoonright
¾ \leftarrowtail ½ \rightarrowtail ¼ \downharpoonleft
® \leftrightharpoons ­ \rightleftharpoons º \downharpoonright
A \Lsh A \Rsh A \rightsquigarrow
" \looparrowleft # \looparrowright ! \leftrightsquigarrow
x \curvearrowleft y \curvearrowright
ª \circlearrowleft ⓒ \circlearrowright

 표 16: AMS Negated Binary Relations and Arrows.
\nless \ngtr & \varsubsetneqq
\lneq 
 \gneq ' \varsupsetneqq
\nleq \ngeq " \nsubseteqq

 \nleqslant \ngeqslant # \nsupseteqq
\lneqq \gneqq - \nmid
.. \lvertneqq \gvertneqq , \nparallel
\nleqq \ngeqq . \nshortmid
\lnsim \gnsim / \nshortparallel
\lnapprox \gnapprox \nsim
\nprec \nsucc \ncong
\npreceq \nsucceq 0 \nvdash
\precneqq \succneqq 2 \nvDash
\precnsim \succnsim 1 \nVdash
\precnapprox \succnapprox 3 \nVDash
( \subsetneq ) \supsetneq 6 \ntriangleleft
\varsubsetneq ! \varsupsetneq 7 \ntriangleright
* \nsubseteq + \nsupseteq 5 \ntrianglelefteq
$ \subsetneqq % \supsetneqq 4 \ntrianglerighteq
8 \nleftarrow 9 \nrightarrow = \nleftrightarrow
: \nLeftarrow ; \nRightarrow < \nLeftrightarrow

표 18: AMS Miscellaneous.
~ \hbar } \hslash | \Bbbk
¤ \square ¥ \blacksquare s \circledS
M \vartriangle N \blacktriangle { \complement
O \triangledown H \blacktriangledown a \Game
§ \lozenge ¨ \blacklozenge F \bigstar
\ \angle ] \measuredangle ^ \sphericalangle
\diagup \diagdown 8 \backprime
@ \nexists ` \Finv ? \varnothing
g \eth f \mho 

LaTeX 문법과 예제

수식 삽입하기 기능은 LaTeX 문법을 입력받아 처리합니다. LaTeX(레이텍이라고 읽습니다)은 문서 조판에 사용되는 프로그램으로 도널드 크누스가 만든 TeX을 매크로로 정리하여 1984년에 레슬리 램포트가 만들었습니다.

 

이 페이지에서 모든 문법을 설명하기보다는 예제를 주로 보여드리도록 하겠습니다.

 

코드 예제
\alpha, \beta, \gamma, \mu,
\theta, \vartheta, \phi, \varphi, \omega,
\Gamma, \Theta, \Phi, \Omega
\alpha, \beta, \gamma, \mu, \theta, \vartheta, \phi, \varphi, \omega, \Gamma, \Theta, \Phi, \Omega
\cos (2\theta) = \cos^2 \theta - \sin^2 \theta \cos (2\theta) = \cos^2 \theta - \sin^2 \theta
\lim_{x \to \infty} \exp(-x) = 0 \lim_{x \to \infty} \exp(-x) = 0
x \equiv a \pmod b x \equiv a \pmod b
k_{n+1} = n^2 + k_n^2 - k_{n-1} k_{n+1} = n^2 + k_n^2 - k_{n-1}
\frac{n!}{k!(n-k)!} = \binom{n}{k} \frac{n!}{k!(n-k)!} = \binom{n}{k}
\frac{\frac{1}{x}+\frac{1}{y}}{y-z} \frac{\frac{1}{x}+\frac{1}{y}}{y-z}
^3/_7 ^3/_7
\sqrt{\frac{a}{b}} \sqrt{\frac{a}{b}}
\sqrt[n]{1+x+x^2+x^3+\ldots} \sqrt[n]{1+x+x^2+x^3+\ldots}
\sum_{i=1}^{10} t_i \sum_{i=1}^{10} t_i
\int_0^\infty e^{-x} \, dx \int_0^\infty e^{-x} \, dx
 \sum_{\substack{
  0<i<m \\
  0<j<n
 }}
P(i,j)
 \sum_{\substack{ 0<i<m \ 0<j<n }} P(i,j)
\left(\frac{x^2}{y^3}\right) \left(\frac{x^2}{y^3}\right)
\begin{matrix}
 a & b & c \\
 d & e & f \\
 g & h & i
\end{matrix}
\begin{matrix} a & b & c \ d & e & f \ g & h & i \end{matrix}
A_{m,n} =
\begin{pmatrix}
 a_{1,1} & a_{1,2} & \cdots & a_{1,n} \\
 a_{2,1} & a_{2,2} & \cdots & a_{2,n} \\
 \vdots  & \vdots  & \ddots & \vdots  \\
 a_{m,1} & a_{m,2} & \cdots & a_{m,n}
\end{pmatrix}
A_{m,n} = \begin{pmatrix} a_{1,1} & a_{1,2} & \cdots & a_{1,n} \ a_{2,1} & a_{2,2} & \cdots & a_{2,n} \ \vdots & \vdots & \ddots & \vdots \ a_{m,1} & a_{m,2} & \cdots & a_{m,n} \end{pmatrix}
 \begin{array}{c|c}
 1 & 2 \\
 \hline
 3 & 4
\end{array}
 \begin{array}{c|c} 1 & 2 \ \hline 3 & 4 \end{array}
50 \textrm{ apples} \times 100 \textbf{ apples} = \textit{lots of apples}^2 50 \textrm{ apples} \times 100 \textbf{ apples} = \textit{lots of apples}^2
\[f(n) = \left\{
\begin{array}{l l}
  n/2 & \quad \mbox{if $n$ is even}\\
  -(n+1)/2 & \quad \mbox{if $n$ is odd}\\
\end{array} \right. \]
\[f(n) = \left\{ \begin{array}{l l} n/2 & \quad \mbox{if $n$ is even}\ -(n+1)/2 & \quad \mbox{if $n$ is odd}\ \end{array} \right. \]
\[\left(
  \begin{array}{c}
    n \\
    r
  \end{array}
  \right) = \frac{n!}{r!(n-r)!}
\]
\[\left( \begin{array}{c} n \ r \end{array} \right) = \frac{n!}{r!(n-r)!} \]

 


출처: 
http://hyunkyukim.tistory.com/31 

예전에 개인 홈페이지를 바닥부터 직접 코딩했을 때에는 수식 바꾸는 코드도 직접 짰는데, 요즘은 세상이 좋아져서 그런건 누군가 나이스한 코드를 다 짜놨더군. 어쨌든 수학자로서 자기 블로그에 수식을 편하게 쓸 수 있게 되는 일은 꽤나 쿨하다. 게다가 댓글에도 수식이 되니 토론도 가능하고.

결론부터 말하자면 자신의 블로그(예를 들면 티스토리)에 수식 입력을 가능하게 하고싶은 사람은http://www.mathjax.org에 가서 CDN(content distribution network)이라는 것에 대해서 찾아보면 된다 (귀찮으면 여기 클릭). 

어디서 찾았냐하면, 요즘 가끔 들르는 미국 웹사이트중에 Math Overflow (홈페이지)라는 곳이 있는데 전세계 수학자들이 리서치 레벨(다 이런건 아니지만)의 수학에 대해서 질문하고 답하는 곳이다. 유명한 사람도 많고. 여기서 수식을 자유자재로 쓰는걸 보고 이건 어떻게 했을까 하다가 바닥 부분에 있는 MathJax 배너를 보고 들어가서 알게 되었다. 그래서 나도 왼쪽 사이드바에 배너를 달았지 ㅋ

서론이 길었고. 저 위에 링크한데 들어가면 어떻게 하는지 다 써있다. 다음의 코드 (주소가 길어서 짤려보일테지만 드래그하고 카피하면 됨)

<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

를 <head>와 </head>사이에 넣거나 <body>와 </body>사이에 넣으면 된다. 헤드에다가 넣는걸 더 추천한다는군. 티스토리에선 어떻게 하냐면, 관리 화면에서 스킨->HTML/CSS 편집에서 HTML부분에서 </title>바로 다음 부분에다가 붙여넣기 하면 된다.

사용법은 (tex의 문법을 알 경우) 매우 간단한데, tex(텍)을 쓰는 사람은 알겠지만 텍을 쓸 때에는 그냥 문장 중간에 f(x)=x2 이런식으로 들어가는 수식과 아예 자기 혼자 한 줄을 차지하는

f(x)=2x
이런 수식이 있다. 앞의 종류는 $와 $사이에 수식을 넣으면 된다. 그러니까 위에서 내가 쓴 첫 수식은 블로그에서 그냥 $f(x)=x^2$라고 쓰면 나온다!

두번째로 쓴 자기 혼자 줄 차지하는 저런 수식은 달러 사인($)을 두개씩으로 늘리면 되는데, 즉 내가 쓴 저건$$f '(x)=2x$$라고 쓰면 나온다! 컴퓨터에서 텍 쓸때랑 똑같다고 보면 된다. 더블 달러 사인 대신 \[ 와 \]사이에 수식을 넣어도 더블 달러 사인과 똑같은 효과를 볼 수 있다.

그런데 블로그에서 가끔 달러 사인 $을 수식을 쓸 때가 아닌 때에 쓰고 싶을 때가 있을 수도 있으므로 위의 방식이 불편할 가능성이 있다. 이를 위해서 MathJax 에서는 달러사인 대신에 임의의 기호를 쓸 수 있게 해주는데,  나도 달러 사인이 아닌 다른 약간 수정된 기호를 쓰려다가 사실 내가 블로그에서 달러 사인을 달러나 돈의 의미로 쓸 일이 거의 없는것 같아서 그냥 놔뒀다.

손님이 댓글을 달 때에도 내가 하는것 같이 달러 사인을 이용해서 수식을 입력할 수 있는데, 나야 혹시 달러 사인을 달러나 돈의 의미로 써야 할 경우에 html편집으로 귀찮긴 해도 그렇게 할 수는 있지만 손님은 html입력이 불가능하므로 달러사인을 그용도(돈)로는 사용불가.

임의의 기호를 쓰는 것에 대해 설명을 해보자면, 예를 들어서 달러사인 $ 앞과 뒤에 '를 첨가하는 방식을 쓸 수있다; 즉 위에서 f(x)=x2를 표현하기 위해서 글 입력 시에 '$f(x)=x^2$'라고 입력하도록 하는 것이다. 그러한 설정을 어떻게 하냐면, 이것 역시 MathJax 홈페이지에 다 있는데 여기 써보자면 다음과 같다 (다음의 코드를 알맞게 수정하여 아까 위의 코드 바로 앞에 집어넣으면 됨):

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>

위에서 inlineMath라고 하는게 f(x)=x2와 같이 자기 혼자 한 줄을 차지하지 않고 그냥 글의 일부가 되는 수식을 말하는 거고, 위에서 나오는 두 개의 $ 부분을 자기가 원하는 기호로 바꾸면 된다. 즉 지금 말하는 예에서는 위에서 ['$', '$'] 대신에 ['\'$', '$\'']라고 쓰면 된다. HTML을 쓸 때에 따옴표 안에서는 작은따옴표(backtick)를 '라고 그냥 쓰면 안되고 \'이라고 써야된다.

이제 수식을 설치했으니 수학에 대해서 좀 더 얘기해봐야겠구만. 사실은 원래도 티스토리에 수식 입력하는 코드를 설치했었는데 HTML태그를 사용하는 방법이어서 지금 이것보다 훨씬 불편했다. 이제 좀 더 자유로워졌음! 


커멘트(06/19/11): Mathjax에서 그러길 내가 쓰는 configuration이 예전 꺼라고 뭐 다시 specify를 하라는데, 아마도 위의 첫번째 코드에서 src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" 부분을 src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"로 바꿔야되나? 참조는http://www.mathjax.org/help/configuration/


추가(12/20/11): 폰트 바꾸는 법. 위에서 말한 소스만 가지고 쓰다보니 일부 컴퓨터에서 수식의 폰트가 구리게 나오는 것을 발견.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
            processEscapes: true },
  "HTML-CSS": { availableFonts: ["TeX"] } 
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=Accessible"> </script> 
위의 코드는 거의 내가 쓰는 코드와 동일. 저기서 inlineMath 부분이 그냥 일상적인 수식코드. 예를 들면 3x=x2이런거를 뭘로 trigger할 것이냐. 그리고 displayMath 부분은 지 혼자 한 줄을 다 차지하는 equation을 쓸 때 뭣으로 trigger할 것이냐를 설정. 그리고서 나오는 processEscapes: true 는 뭔지 잘은 모르겠는데 쓰는 것이 좋은것 같다 (안쓰니 한번 에러났던 듯?)

그리고가 중요한데 저기 HTML-CSS 부분. 저걸 안쓰면 STIX(이게 무슨 의미든 간에. 나도 잘 모름)라는 font 등의 local font를 쓰게 되는데, 뭔소리냐면 웹사이트에 접속하는 사용자의 컴에 저장된 수식용 폰트를 쓴다는거다. 그래서 가끔 컴퓨터에 저장된 폰트가 구릴 경우 정말 구리게 보일 수가 있다. 이걸 방지하는 코드임.

그리고 마지막에 config을 Accessible로 한 것은, Accessible은 수식을 더블클릭하면 확대해서 볼 수 있게 해주는 설정임.

더 자세한 사항은 http://www.mathjax.org/docs/1.1/configuration.html 참조.

아 그리고 또 하나의 팁은 한개 달러사인($)을 내가 하는 식으로 in-line 수식을 표현하는 용도로 쓸 경우에, 정말 그냥 달러사인($)은 무슨 수로 출력하냐면, 달러사인($)을 html 코드에서 <font>와 </font>로 감싸면 됨. 무슨 소린지 모르겠으면 이 페이지를 소스보기 해서 내가 달러사인을 어떻게 출력했나 보면 됨.


'ETC > Tips' 카테고리의 다른 글

전두엽(Frontal lobes) 후두엽(Occipital lobes)의 역할  (0) 2012.01.12
Visual Studio에 테마 적용하기  (0) 2012.01.05
티스토리 코드올리기 2탄  (0) 2011.11.01
아이콘, 그림 찾기  (0) 2011.10.24
구글 URL 줄이기  (0) 2011.10.17