티스토리 - LaTex 수식 적용하기

728x90

안녕하세요. 코딩산책입니다.

티스토리에 LaTeX 수식을 넣기 위해서는 약간의 설정과 추가적인 플러그인을 사용할 수 있습니다. 기본적으로 티스토리 자체에서는 LaTeX를 지원하지 않지만, MathJax를 사용하면 LaTeX 수식을 웹에서 시각적으로 표현할 수 있습니다. MathJax는 자바스크립트 라이브러리로, 티스토리 HTML 코드에 추가하면 수식을 쉽게 표시할 수 있습니다.

1. MathJax 설정 및 적용 방법

1.1. 티스토리 HTML/CSS 편집 페이지로 이동

먼저, 티스토리 블로그 관리자 페이지(https://'BLOG_ID'.tistory.com/manage)로 이동하여 왼쪽 메뉴에서 "꾸미기" > "스킨 편집" 항목을 클릭합니다.

"html 편집" 버턴을 누르면 HTML/CSS를 편집할 수 있는 메뉴로 이동합니다.

1.2. MathJax 스크립트 추가

HTML <head> 태그에 MathJax 라이브러리 호출 스크립트를 추가해야 합니다. 이는 블로그 전체에 MathJax가 적용되도록 합니다. 이 스크립트는 MathJax의 주요 자바스크립트 파일을 불러오며, 비동기 방식으로 로드되어 블로그의 로딩 속도에 큰 영향을 주지 않습니다.

아래 코드를 <head> 태그 안에 추가하세요.

<script type="text/javascript">
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']],
      processEscapes: true,
      tags: 'ams'
    },
    svg: {
      fontCache: 'global'
    }
  };
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.js" async></script>

• window.MathJax: MathJax 3.x에서는 설정을 window.MathJax 객체를 통해 설정합니다.
• tex.inlineMath: $...$ 및 $(...$) 구문을 인라인 수식으로 설정합니다.
• processEscapes: true: 수식 내에서 이스케이프 문자를 처리하는 기능을 활성화합니다.
• svg.fontCache: 'global': SVG 렌더링을 사용할 때 글꼴 캐시를 글로벌하게 유지하여 페이지 로드 성능을 향상시킵니다.
• 스크립트 파일: MathJax 3.x 파일을 호출하며, async 속성으로 비동기 로딩을 설정하여 페이지 성능에 영향을 덜 주도록 했습니다.

2. LaTex 수식 작성법

MathJax는 LaTeX 형식을 인식하므로, 포스트를 작성할 때 아래와 같은 규칙으로 수식을 본문 내용에 그대로 삽입할 수 있습니다.

인라인 수식: \$ 수식 내용 \$
블록 수식: \$\$ 수식 내용 \$\$

2.1 인라인 수식

본문 중에 간단한 수식을 넣을 수 있습니다.

물리학의 가장 유명한 공식 중 하나는 $E=mc^2$ 입니다.

위 블록은 \$E=mc^2\$ 를 본문 중간에 인라인으로 표현합니다.

2.2 블록 수식

별도의 줄에 수식을 크게 표시하려면 블록 수식을 사용합니다.

$$\int_{a}^{b}(x_{a}-y_{b})$$

위 블록은 \$\$\int_{a}^{b}(x_{a}-y_{b})\$\$ 를 중앙에 블록으로 표시합니다.

2.3 수식 문법

수식 문법은 아래의 링크에서 만들어서 복사, 붙여넣기 하면 쉽게 수식 작성이 가능합니다.

Equation Editor for online mathematics - create, integrate and download

Download svg gif png pdf emf 5 pt 9 pt 10 pt 12 pt 18 pt 20 pt 50 80 100 110 120 150 200 300 Transparent White Black Red Green Blue Inline Block WordPress phpBB Tiny Wiki url url encoded xml pre doxygen html latex Formatted string containing your Equation

editor.codecogs.com

3. 결론

MathJax를 사용하여 티스토리 블로그에서 LaTeX 수식을 표현하려면 MathJax 스크립트를 HTML <head>에 추가한 후, 포스트 작성 시 LaTeX 수식 문법을 사용하면 됩니다. MathJax는 매우 강력한 도구로, 수학적 표현을 정확하게 표시할 수 있도록 지원합니다.

해당 포스트가 유용하셨다면 하단의 좋아요와 구독하기 부탁드립니다. ^^

[Codingwalks]에게 송금하기 - AQR

aq.gy