본문 바로가기

기타

LaTeX를 이용해 수식 입력하기

선 결론

인라인 수식 입력까지 한번에 작성 가능해지려면 

관리자 메뉴 > 꾸미기 > 스킨 편집 > 우상단의 html편집 순으로 들어가 head태그 사이에

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

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

를 붙여넣으면 $를 이용해 인라인 입력, $$를 이용해 따로 문단에 나타내기가 가능해진다.


알고리즘 공부를 시작하며 수학식을 글에 작성해야 할 일이 많아지기 시작했다.


수식을 입력하는 사이트를 통해 그림을 넣는 방식이나, 티스토리 자체 수식입력기를 이용해 작성하는 방식을 이용해봤으나 두 방식 다 만족스러운 정도로 수식이 입력되지 않았다.

해결을 위해 검색하던 중 LaTeX를 개인 티스토리 HTML설정에 적용한다면 수식을 글 중간에 작성이 가능해진다는 사실을 알아내게 되었다.


1. LaTeX

여러 블로그들을 방문하며 정보를 쌓은 결과 head단에 LaTeX api를 불러올 수 있는 스크립트 문장을 넣으면 문장 중간이나 다음 문단에 깔끔한 수식을 출력할 수 있게 된다는 것을 확인했다.

관리자 메뉴 > 꾸미기 > 스킨 편집 > 우상단의 html편집을 순서대로 클릭 후 나타나는 html문서에서 <head></head>로 감싸져 있는 부분 아무곳에나

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

를 붙여넣으면 LaTeX를 이용해 글 작성시 수식을 입력할 수 있게 된다.

하지만, 여러 블로그에서는 곧장 인라인 수식 입력이 가능해진다고 설명되었던것과는 달리 실제 입력 방식을 사용해 입력할 경우 $$일때만 LaTeX가 정상작동하는 문제가 발생하였고, 별다른 해결책이 보이지 않자 다른 방법으로 선회하기로 결정했다.


2. 티스토리 수식입력기

대놓고 글 입력창 윗부분에 수식입력기가 있는 것을 발견하고 이를 이용하면 굳이 스크립트를 수정하지 않고도 수식을 편하게 입력할 수 있지 않을까 생각하여 이 방식을 시도했다.

처음에는 Flash Player 10을 설치 후 다시 시도해달라는 글만 계속 보이며 어도비 플래시 드라이버를 업데이트한 후에도 해당 글은 없어지지 않았다.

해결을 위해 구글링을 했을 때도 수식입력기는 버려진 기능이였는지 아니면 LaTeX가 더 유용하기 때문인지 해결법을 찾기 힘들었습니다.

https://mystorage1.tistory.com/517(처음해보는 블로그) 를 통해 해결책을 찾아내었으며 생각보다 간단한 원인이였다. 

크롬 버젼 63 이후에는 MITM(중간자공격)을 감지하는 보안 기능이 추가되어 https로 사이트가 연결되지 않으면 주소 창 앞부분에 '주의 요함'표시와 함께 쿠키나 Flash등 가능을 막아버린다.

이를 해결하기 위해 막힌 기능을 다시 허용해주기만 하면 정상적으로 수식입력기를 실행할 수 있게된다.

수식입력기를 실행한 모습

수식입력기를 불러와보면 이 기능도 LaTeX기반으로 작성한다는 것을 추측해볼 수 있다.

하지만 새로운 문제가 발생하게 되었는데, 인라인 입력을 할 경우 수식이이처럼 아래로 가라앉아버리는 것이다.

조금 더 입력기를 살펴보면 해결이 가능할 수도 있었지만, 매번 실행기를 통해 수식을 입력하는 것은 매우 불편한 방법이라는 판단을 하고 다시 LaTeX방식으로 돌아왔다.


3. LaTeX 보완

정말 방법이 없는것일까 하는 마음으로 더 알아본 결과 결국 해결책을 찾아낼 수 있었다.

https://helloworldpark.github.io/jekyll/update/2016/12/18/Github-and-Latex.html(근본없는 개발자) 를 살펴보던 중 댓글에 html문서에 추가적인 스크립트를 작성해준다면 인라인 입력이 가능하다는 답변을 발견하였다.

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

구문을 head태그 내에 추가적으로 작성하자 $log_{2}4$와 같이 수식 입력이 문장 내에서도 깔끔하게 입력이 가능해졌다.


*LaTeX를 통해 자주 입력할 것 같은 수식에 대한 작성법

윗/아랫첨자 등을 입력할 때, 한글자 이상의 단위수식에는 괄호()를 치고 입력하면 그 단위 그대로 적용된다. 괄호가 없으면 한 글자만 적용되고 나머지 글자는 첨자 적용이 되지 않는다.

단위 수식 입력 후 space를 눌러주면서 입력해야 수식이 꼬이지 않는다.

윗첨자는 ^, 아랫첨자는 _으로 연결하면 된다.

어떤 단위 수식을 입력하고 space를 치면 내가 의도한 바가 곧장 적용된다.


적분(integral): \int

-pi에서 pi까지의 적분: \int_-\pi^\pi

이중, 삼중적분: \iint, \iiint (귀엽다ㅋㅋㅋ)

편미분(partial integral): \partial

partial x 나누기 partial theta (x를 theta로 편미분): \partial x / \partial \theta

무한대 표현: \infty

x는 무한대로 발산한다: x \to \infty

연쇄 합(Sigma): \sum

k=1부터 n까지의 함수 f의 연쇄 합: \sum_(k=1)^n f

여러가지 등호표현

근사(approximation): \approx

부등호: (두 가지 모두 가능) >= 혹은 \leq, <= 혹은 \geq

정의, 동등함의 표현 (equivalent, 작대기 세개): \equiv

내적, 가운데 점 표시, 생략 표현: \cdot, \cdots

theta에 대한 대문자, 소문자 표현:\Theta, \theta

벡터, hat, bar 표현: \vec, \hat, \bar

윗첨자 : a^2, $a^2$

아래첨자 : a_2, $a_2$

다문자첨자 : a^{2+2}, $a^{2+2}$, a_{i,j} $a_{i,j}$

위 아래 : x_2^3, $x_2^3$

미분 : x', $x'$

시그마 : \sum_{k=1}^N k^2, $\sum_{k=1}^N k^2$

곱기호 : \prod_{i=1}^N x_i, $\prod_{i=1}^N x_i$

극한 : \lim_{n \to \infty}x_n, $\lim_{n \to \infty}x_n$

적분 : \int_{-N}^{N} e^x\, dx, $\int_{-N}^{N} e^x\, dx$

선적분 : \oint_{C} x^3\, dx + 4y^2\, dy, $\oint_{C} x^3\, dx + 4y^2\, dy$

분수 : \frac{2}{4} or {2 \over 4}, $\frac{2}{4}$ or ${2 \over 4}$

로그 : \log_{2}x, $log_{2}x$