2025. 11. 3. 13:19ㆍTistory Skin Customizing
이 글에서는 티스토리 블로그 게시글에 LaTeX 수식을 적용하는 방법을 소개합니다.
수학식이나 알고리즘 공식을 표현할 때, 노션이나 마크다운에서 $로 감싼 수식을 그대로 붙여넣으면 LaTex로 렌더링됩니다.
예시: 노션에서 작성한 LaTeX 수식
아래는 노션(Notion) 에서 작성한 글을 그대로 복사·붙여넣기한 결과입니다.
LaTeX 수식이 적용되었던 영역은 $로 감싸진 부분입니다.
티스토리에서는 기본적으로 $으로 이루어진 영역을 인식하지 않으며, LaTex를 지원하지 않습니다.
아래 과정을 통해 LaTeX를 적용해야 합니다.
1. mathjax-init.js 파일 작성
HTML 내부에 <script> 태그를 직접 넣는 방법도 있지만,
스킨 파일이 복잡해지고 관리가 어렵기 때문에 별도의 JS 파일을 업로드하는 방식을 추천합니다.
아래 코드를 복사하여 mathjax-init.js 파일로 저장하세요.
// mathjax-init.js
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
(function() {
const s = document.createElement('script');
s.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
s.async = true;
document.head.appendChild(s);
})();
이 스크립트는 페이지 로드 후 자동으로 MathJax 라이브러리를 불러와,
$...$로 감싼 부분을 LaTeX 수식으로 변환해 줍니다.
2. JS 파일 업로드 (티스토리 스킨 편집)
- 블로그 관리 → 꾸미기 → 스킨 편집 → HTML 편집 으로 이동합니다.
- 우측 사이드바 상단의 “파일 업로드” 메뉴로 들어갑니다.
- 아래쪽의 ‘+추가’ 버튼을 클릭해 방금 만든 mathjax-init.js 파일을 업로드합니다.
업로드된 파일의 기본 저장 경로는 /images/* 입니다.
예: ./images/mathjax-init.js
3. JS 파일 불러오기
업로드한 파일을 실제 HTML 파일에 연결해야 합니다.
1. 같은 HTML 편집 화면에서 <head>...</head> 사이를 찾습니다.
2. 아래의 코드를 추가합니다.
<script src="./images/mathjax-init.js"></script>
3. 우측 상단의 “적용” 버튼을 눌러 저장합니다.
4. 적용 결과 확인
적용 결과는 다음과 같습니다
티스토리 게시글에도 LaTex수식이 적용된 것을 확인할 수 있습니다.
주의점
LaTex 수식을 의미하는 '$', '\(' 로 감싸진 모든 영역을 랜더링하므로, 의도치 않은 상황에서 일부 글자가 생략될 수 있습니다.