티스토리에서 MathJax로 쉽게 수식 입력하기(feat.LaTeX)

모든 브라우저에서 잘 작동하는 웹 수식 편집 도구 'MathJax'를 이용해서

LaTeX 수식을 티스토리(Tistory)에서 쉽게 입력해보자!!

공학이 전공인지라 아무래도 포스팅에 수식을 종종 입력할 일이 생기는데,

아쉽게도 티스토리에서는 적절한 수식 입력기를 제공해주지 않고 있다.

논문을 작성할 때 아래한글(.hwp)이나 MS워드(.doc, .docx)를 많이 사용하기도 하지만

생각 이상으로 양식을 맞추는 것이 어려워(귀찮...) 오히려 스크립트 기반인 LaTeX도 많이 사용된다.

세상에는 훌륭한 분들이 많이 계셔서 LaTeX의 수식 문법을 자바스크립트 파일(.js)만 가져다 쓰면

쉽게 쓸 수 있는 툴을 제공하고 있으니 이름하여 MathJax다.

https://www.mathjax.org/

MathJax

Beautiful math in all browsers.

www.mathjax.org

현재는 버전이 3점대까지 나왔다. 기존에 필자도 2점대 버전을 사용했는데 이번 포스팅을 계기로 3점대로 넘어왔다.

MathJax는 TeX, LaTeX, MathML 문법을 지원한다.

3점대를 사용하기 위해서는 간단하게 작성하려는 포스팅 혹은 HTML에

간단하게 아래의 자바스크립트 코드를 포함시키면 된다.

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

간단한 예제도 아래와 같이 친절하게 제공하고 있다.(example on jsbin)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MathJax example</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>
</head>
<body>
<p>
  When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
</body>
</html>

위의 HTML 파일이 출력되는 모습은 아래와 같다.

하지만 티스토리에서 작업을 하게되면 위의 설명으로는 부족하다.

본 포스팅에서는 MathML은 완전히 생략하고, LaTeX문법만을 사용하기 위해 MathJX를 사용하겠다.

이 경우는 특별한 설정없이 아래의 방식으로 바로 사용할 수 있다는 장점이 있다.

바로 사용하기 위해서는 여기부터 아래만 봐도 충분하다.

(1) 기본모드에서 HTML모드로 변경 후 맨 위에 아래의 자바스크립트 코드를 포함시킨다.

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

(2) LaTeX 문법을 사용한 코드를 작성하고, 역슬래쉬 괄호 형태(아래 참조;중괄호는 안됨) 또는 이중달러로 코드를 묶어준다.

\[    x=\frac{-b+\sqrt{b^{2}-4ac}}{2a}    \]
\(    x=\frac{-b+\sqrt{b^{2}-4ac}}{2a}    \)
$$    x=\frac{-b+\sqrt{b^{2}-4ac}}{2a}    $$

위의 HTML 코드에 있는 LaTeX 수식을 그대로 적어보았다. 짜잔!

\[    x=\frac{-b+\sqrt{b^{2}-4ac}}{2a}    \]
$    x=\frac{-b+\sqrt{b^{2}-4ac}}{2a}    $
$$    x=\frac{-b+\sqrt{b^{2}-4ac}}{2a}    $$

위 표기 방식의 용도가 다른 것도 확인할 수 있다. (inline입력과, block방식의 입력이다.)

LaTeX 코드는 https://www.codecogs.com/latex/eqneditor.php 이곳에서 작성하면 편하다.

Online LaTeX Equation Editor - create, integrate and download

Type your equation in this box

www.codecogs.com

위의 방식이 불편하다면 아래와 같이 설정을 조정할 수 있다.

(1) 기본모드에서 HTML모드로 변경 후 맨 위에 아래의 자바스크립트 코드를 포함시킨다. (설정이 추가된 것을 확인할 수 있다.)

<script>
  MathJax = {
    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
  };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

(2) LaTeX 코드를 적은 뒤 앞뒤에 달러표시($)로만 묶어준다.

위의 수식 x=\frac{-b+\sqrt{b^{2}-4ac}}{2a} 이 부분을 달러로 묶어보겠다.

$x=\frac{-b+\sqrt{b^{2}-4ac}}{2a}$

짜잔!

이렇게 사용하면 된다.

특정 버전을 지정하지 않고 위의 방식으로 하면 항상 최신 3점대 버전을 사용할 수 있으니 참고하기 바란다.

참고자료

1. 위키백과 TeX문법 참조: https://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:TeX_%EB%AC%B8%EB%B2%95)

위키백과:TeX 문법 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 위키백과에서는 수학 공식을 간편하게 입력하기 위해, TeX 문법을 지원합니다. 이것은 수식이 간단한 경우 HTML로, 복잡한 경우에는 PNG 그림으로 나타납니다. 또�

ko.wikipedia.org

2. MathJax TeX 데모 예제 https://mathjax.github.io/MathJax-demos-web/tex-chtml.html

MathJax v3 with TeX input and HTML output

MathJax v3 beta: TeX input, HTML output test When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ The Lorenz Equations \begin{align} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \

mathjax.github.io

저작자표시 비영리

'IT-Engineering' 카테고리의 다른 글

WebP란 무엇인가 - WebP 확장자 PNG로 저장하기(feat. Google Play Store) (0)	2020.06.24
git push시 자동 로그인 설정 - SSH 설정으로 username, password 그만 입력하자 (0)	2020.06.08
MS Word(워드)에 코드 syntax(문법) 강조해서 넣기 (0)	2020.04.08
가비아 도메인 소유자 영문 이름 변경 (0)	2020.04.06
윈도우(Windows) Visual Studio Code 웹페이지 테스트시 크롬(chrome) 실행 환경 만들기(tasks.json) (0)	2020.04.05

삵 izz well

티스토리에서 MathJax로 쉽게 수식 입력하기(feat.LaTeX)

모든 브라우저에서 잘 작동하는 웹 수식 편집 도구 'MathJax'를 이용해서

LaTeX 수식을 티스토리(Tistory)에서 쉽게 입력해보자!!

MathJax는 TeX, LaTeX, MathML 문법을 지원한다.

하지만 티스토리에서 작업을 하게되면 위의 설명으로는 부족하다.

본 포스팅에서는 MathML은 완전히 생략하고, LaTeX문법만을 사용하기 위해 MathJX를 사용하겠다.

바로 사용하기 위해서는 여기부터 아래만 봐도 충분하다.

위의 방식이 불편하다면 아래와 같이 설정을 조정할 수 있다.

'IT-Engineering' 카테고리의 다른 글

댓글

티스토리툴바

티스토리에서 MathJax로 쉽게 수식 입력하기(feat.LaTeX)

모든 브라우저에서 잘 작동하는 웹 수식 편집 도구 'MathJax'를 이용해서

LaTeX 수식을 티스토리(Tistory)에서 쉽게 입력해보자!!

MathJax는 TeX, LaTeX, MathML 문법을 지원한다.

하지만 티스토리에서 작업을 하게되면 위의 설명으로는 부족하다.

본 포스팅에서는 MathML은 완전히 생략하고, LaTeX문법만을 사용하기 위해 MathJX를 사용하겠다.

바로 사용하기 위해서는 여기부터 아래만 봐도 충분하다.

위의 방식이 불편하다면 아래와 같이 설정을 조정할 수 있다.

'IT-Engineering' 카테고리의 다른 글

관련글

댓글

티스토리툴바