반응형

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

 

 

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

\[ \begin{align} \color{#FF5733}{\dfrac{n(n+1)}{2}} \quad \dfrac{\dfrac{\sqrt{x}+1}{2}-x}{y^2} \\[10pt] \color{#3498DB}{\int_a^b} \! f(x) \, dx = \lim_{\Delta x \rightarrow 0} \color{#3498DB}{\sum_{i=1}^{n}} f(x_i) \,\Delta x_i \\[10pt] ax^2 + bx + c = 0 \\ \color{#2ECC71}{x_{1,2} = \frac{-b \pm \sqrt{b^2-4ac}}{2a}} \\[10pt] N = \underbrace{1 + 1 + \cdots + 1}_{\color{#E74C3C}{n}} \\[10pt] \color{#9B59B6}{\binom{n}{k}} = \frac{n!}{k!(n-k)!} \end{align} \]
\[ \begin{gather} \begin{split} {\color{#FF5733} \varphi(x,z)} &= z – {\color{#3498DB} \gamma_{10}} x – \sum_{m+n\ge2} {\color{#3498DB} \gamma_{mn}} x^m z^n \\ &= z – {\color{#E74C3C} M r^{-1}} x – \sum_{m+n\ge2} {\color{#E74C3C} M r^{-(m+n)}} x^m z^n \end{split} \tag{4.a}\label{eq:4a} \\[10pt] \begin{split} {\color{#2ECC71} \zeta^0} &= ({\color{#9B59B6} \xi^0})^2, \\ {\color{#2ECC71} \zeta^1} &= {\color{#9B59B6} \xi^0 \xi^1} \end{split} \notag \end{gather} \]

인라인 수식은? \(\LaTeX\) 이게 인라인이 아니고 뭘로 보이나?🤣🤣🤣

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

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

서식 글을 작성한다.

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

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

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

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

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

  • tex-chtml
  • tex-svg
  • tex- mml -chtml
  • tex- mml -svg
  • mml -chtml
  • mml -svg

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

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

https://www.jsdelivr.com/package/npm/mathjax?tab=files&slide=collection

 

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://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.min.js"></script>

2026.01 기준 최신 버전은 v4.1이다.

CDN은 cloudflare 대신 jsdelivr를 이용해야 최신 버전을 자동으로 적용할 수 있다.😉

메이저 최신 버전을 가져올 때. v5 릴리스되면 v5를 가져옴.
<script src="https://cdn.jsdelivr.net/npm/mathjax/tex-svg.min.js"></script>

마이너 최신 버전을 가져올 때. v4.2가 릴리스되면 v4.2를 가져옴.
<script src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.min.js"></script>

특정 버전을 가져올 때
<script src="https://cdn.jsdelivr.net/npm/mathjax@4.1.0/tex-svg.min.js"></script>

스킨 - HTML에 환경설정 코드를 추가한다.

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

기본값

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

window.MathJax = {
  tex: {
    packages: ['base'],              // 사용할 확장 기능
    inlineMath: [                    // 인라인 수식을 위한 시작/종료 구분자 쌍
      ['\\(', '\\)']
    ],
    displayMath: [                   // 디스플레이 수식을 위한 시작/종료 구분자 쌍
      ['$$', '$$'],
      ['\\[', '\\]']
    ],
    processEscapes: true,            // \$를 사용하여 실제 달러 기호를 표시할지 여부
    processEnvironments: true,       // 수식 모드 밖에서 \begin{xxx}...\end{xxx} 처리 여부
    processRefs: true,               // 수식 모드 밖에서 \ref{...} 처리 여부
    numberPattern:                   // 숫자 인식을 위한 패턴
       /^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/,
    initialDigit: /[0-9.,]/,         // 숫자의 첫 번째 숫자 또는 소수점 판별 패턴
    identifierPattern: /^[a-zA-Z]+/, // \mathrm 등에서 다중 문자 식별자를 인식하기 위한 패턴
    initialLetter: /[a-zA-Z]/,       // 식별자의 시작 문자를 판별하기 위한 패턴
    tags: 'none',                    // 'none', 'ams', 'all' 중 선택
    tagSide: 'right',                // 태그 매크로가 표시될 방향
    tagIndent: '0.8em',              // 태그의 들여쓰기 양
    tagAlign: 'baseline',            // 태그 셀에 사용할 수직 정렬 값
    useLabelIds: true,               // ID 생성 시 태그 대신 라벨 이름을 사용함
    ignoreDuplicateLabels: false,    // 중복된 라벨 ID에 대한 에러 메시지 방지 여부
    mathStyle: 'TeX',                // TeX, ISO, French, upright 중 선택
    maxBuffer: 5 * 1024,             // 내부 TeX 문자열의 최대 크기 (5K)
    maxTemplateSubtitutions: 10000,  // 배열 템플릿의 최대 치환 횟수
    baseURL:                         // 태그 링크용 기준 URL (<base> 태그가 효과를 발휘할 때 사용)
       (document.getElementsByTagName('base').length === 0) ?
        '' : String(document.location).replace(/#.*$/, ''),
    formatError:                     // TeX 구문 오류 발생 시 호출되는 함수
       (jax, err) => jax.formatError(err),
    preFilters: [],                  // TeX 입력 jax에 추가할 전처리 필터 목록
    postFilters: [],                 // TeX 입력 jax에 추가할 후처리 필터 목록
  }
};

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

MathJax 최종 설정 코드

<script>
    window.MathJax = {
            loader: {
                load: ['[tex]/physics']
            },
            tex: {
                packages: {'[+]': ['physics']}
            },
            svg: {
                fontCache: 'global'
            },
            options: {
                menuOptions: {
                    settings: {
                        enrich: false
                    }
                }
            }
        };
</script>

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

위 코드는 tex-svg 스크립트를 사용했을 때 physics 확장을 추가한 것이다. 자주쓰는 확장은 자동 로드되지만 physics 같은 추가 확장은 별도로 로드하고 패키지에 넣어야 한다. 아래 수식을 표현할 때 사용한다.

\[ \grad \times \vb{E} = -\pdv{\vb{B}}{t}, \quad \qty( \pdv[2]{u}{x} + \pdv[2]{u}{y} ) = \frac{1}{v^2} \pdv[2]{u}{t} \]

enrich를 false로 설정하면 수식 선택, 스피치 기능을 끌 수 있다.

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

블록을 블럭으로 표기하는 티스토리 하는짓이 클록을 클럭으로 고집하는 다나와스럽다...
Block은 외래어표기법상 블록으로 표기해야 한다.
블럭버스터, 블럭킹...🤣🤣🤣

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

 

참조

MathJax Documentation — MathJax 4.0 documentation

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

관련글

티스토리툴바