티스토리에서 $\LaTeX$ v3.x, v4.x 사용하기

PC&웹/정보&기술

티스토리에서 $\LaTeX$ v3.x, v4.x 사용하기

Simulz™ 2024. 8. 27. 21:14

$\LaTeX$를 설명하는 블로그들은 무분별한 복붙 내용들이 많다. 사용자 정의가 가능한지, 환경설정 코드를 왜 설정하는지 모르는 초보자들은 그대로 보고 베낄 수밖에 없다.

※ 아래는 $\LaTeX$로 작성된 수식이다. 수식 위에서 RMB(마우스 오른쪽 버튼)를 누르면 메뉴가 나타난다.

\[
\begin{align}
\dfrac{n(n+1)}{2} \quad \dfrac{\dfrac{\sqrt{x}+1}{2}-x}{y^2} \\
\int_a^b \! f(x) \, dx = \lim_{\Delta x \rightarrow 0}
\sum_{i=1}^{n} f(x_i) \,\Delta x_i \\
ax^2 + bx + c = 0 \\
x_{1,2} = \frac{-b \pm \sqrt{b^2-4ac}}{2a} \\
N = \underbrace{1 + 1 + \cdots + 1}_n \\
\binom{n}{k} = \frac{n!}{k!(n-k)!} \\
\end{align}
\]

\[
\begin{gather} \begin{split} \varphi(x,z) &= z – \gamma_{10} x – \sum_{m+n\ge2} \gamma_{mn} x^m z^n\\ &= z – M r^{-1} x – \sum_{m+n\ge2} M r^{-(m+n)} x^m z^n \end{split}\tag{4.a}\label{eq:4a}\\ \begin{split} \zeta^0 &= (\xi^0)^2, \\ \zeta^1 &= \xi^0 \xi^1 \end{split}\notag \end{gather}
\]

수학 공식을 사용하지 않는 글이 많고, 모바일 페이지에서도 보여야 한다면, 스킨 파일을 편집하는 것이 아니라 글마다 스크립트를 삽입하는 것이 제일 좋다.

티스토리 블로그가 모바일 페이지로 연결될 때에는 모든 사용자 정의 스크립트를 제거하고 티스토리 내부(타사이트 관련글, 광고 등) 스크립트만 로딩한다. 그래서 방문자가 모바일 페이지로 접속하면 수익이 생길 수 없다.

서식 글을 작성한다.

스크립트 코드는 글을 작성할 때마다 HTML로 붙여 넣어야 하므로 서식을 만들어 놓고 메뉴를 통해 삽입하는 것이 제일 편리하다.

관리자 페이지에서 콘텐츠 - 서식 관리 메뉴로 이동 후 서식을 만든다.

HTML 모드로 편집하거나 HTML 블록 기능으로 자바스크립트를 삽입한다.

필요한 스크립트를 사용한다.

mathjax 스크립트는 아래와 같이 종류가 다양하다. 그러니 필요한 것을 골라서 불러와야 한다. 도움말

tex-chtml
tex-chtml-full
tex-svg
tex-svg-full
tex- mml -chtml
tex- mml -svg
mml -chtml
mml -svg

티스토리에서는 tex 문법을 사용할테니 tex-chtml, tex-svg 스크립트 파일을 불러오면 된다. chtml보다 svg가 진하고 깔끔하게 표기된다.

CDN 파일은 아래 사이트에서 찾을 수 있다.

https://cdnjs.com/libraries/mathjax

mathjax - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

MathJax is an open source JavaScript display engine for mathematics that works in all browsers. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 bi

cdnjs.com

스크립트 예

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-svg.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/4.0.0-beta.7/tex-svg.min.js"></script>

최신 버전은 v4.x 베타이다.

필요할 때에만 환경설정을 추가한다.

환경 설정은 자바스크립트에서 MathJax 변수에 값을 정의하면 된다.

기본값

아래 코드는 직접 입력하지 않을 때 기본값으로 적용되는 값이다.

MathJax = {
  tex: {
    packages: ['base'],        // 배열: 사용할 확장명
    inlineMath: [              // 배열: 인라인 수식 시작, 종료 구분 기호
      ['\\(', '\\)']
    ],
    displayMath: [             // 배열: 수식 시작, 종료 구분 기호
      ['\\[', '\\]']
    ],
    processEscapes: true,      // \$로 $ 기호를 표시할 수 있음
    processEnvironments: true, // 수학 모드 밖에서 \begin{xxx}...\end{xxx}를 처리함
    processRefs: true,         // 수학 모드 밖에서 \ref{...}를 처리함
    digits: /^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/, // 숫자 인식 패턴
    tags: 'none',              // 방정식에 번호 매기기
    tagSide: 'right',          // \tag 매크로에서 태그를 배치할 위치
    tagIndent: '0.8em',        // 태그 들여쓰기
    useLabelIds: true,         // true는 \label 이름 사용, false는 방정식 번호 사용
    maxMacros: 10000,          // 표현식당 최대 매크로 대체 수
    maxBuffer: 5 * 1024,       // 내부 TeX 문자열의 최대 크기(5K)
    baseURL:                   // 태그에 대한 링크에 사용할 URL(<base> 태그가 유효한 경우)
       (document.getElementsByTagName('base').length === 0) ?
        '' : String(document.location).replace(/#.*$/, '')),
    formatError:               // TeX 구문 오류가 발생할 때 호출되는 함수
        (jax, err) => jax.formatError(err)
  }
};

복붙하는 블로그들은 v2에서 사용하던 변수까지 붙여 넣으라고 설명한다. $, $ 기호를 꼭 사용할 필요가 없다. 특히 이 블로그에서는 $기호를 많이 사용하기 때문에 $로 설정해 버리면 문서가 깨져버린다. 그래서 기본값인 $, \$으로 인라인 수식을 표현하고 있다. 멀티라인은 \[, \\]이다. 환경설정 변수에 지정하지 않으면 기본값이 적용된다.

확장 기능을 모두 사용할 때

<script>
    window.MathJax = {
    tex: {
        packages: {'[+]': ['physics', 'color']}}
    },
    svg: {
        fontCache: 'global'
    },
    loader: {
        load: ['input/tex-base', 'output/svg', '[tex]/require', '[tex]/physics', '[tex]/colorv2']
    },
    options: {
        menuOptions: {
            settings: {
                renderer: 'SVG'
            }
        }
    }
    };
</script>

환경설정은 변수로 동작하므로 스킨파일에 넣는 것이 관리하기가 좋다. 모바일에서는 기본값으로 보일 것이다. js 파일로 만들어서 HTML로 불러오려면 window.MathJax 처럼 지정한다.

위 코드는 tex-svg-full 스크립트를 사용했을 때 physics, color 확장을 추가한 것이다. full은 두 개의 확장만 빼고 모두 내장되어 있다. renderer 옵션을 SVG로 설정하면 수식이 더욱 수식 같아진다.

글을 작성할 때 서식을 붙여 넣는다.

블록을 블럭으로 표기하는 티스토리... Block은 외래어표기법상 블록으로 표기해야 한다.
블럭버스터, 블럭킹...🤣🤣🤣

수식이 포함된 글을 작성할 때마다 아무곳에나 위에서 만든 서식을 불러오면 된다. 또는 스크립트 코드를 직접 HTML 모드로 삽입한다.

참조

MathJax Documentation — MathJax 3.2 documentation

저작자표시 비영리 변경금지

티스토리