반응형
수학 공식이나 머신러닝 관련 수식을 티스토리 블로그에 작성해보신 분들이라면 이런 경험 있으실 거예요:
d(x, y) = \sqrt{\sum_{i=1}^{n}(x_i - y_i)^2}
분명 LaTeX 문법으로 썼는데, 그대로 텍스트로 보이기만 한다고요?
그 이유는 티스토리는 기본적으로 수학 공식(LaTeX)을 렌더링하는 기능이 없기 때문입니다.
하지만 걱정 마세요! 아주 간단한 설정만 해주면 수학 공식을 예쁘게 수식 형태로 표시할 수 있습니다.
이번 글에서는 KaTeX을 활용한 설정 방법과 사용 예시까지 알려드릴게요.
✅ KaTeX란?
KaTeX는 LaTeX 문법으로 작성된 수학 공식을 웹에서 빠르게 렌더링해주는 라이브러리입니다.
MathJax보다 가볍고 빠르기 때문에 블로그나 기술 문서에 매우 적합합니다.
🔧 티스토리에 KaTeX 설정하는 방법
1단계. 티스토리 관리자 페이지 접속
[티스토리 관리 > 꾸미기 > HTML/CSS 편집] 메뉴로 이동합니다.
2단계. </head> 태그 바로 위에 아래 코드를 추가
<!-- KaTeX for LaTeX math rendering -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
onload="renderMathInElement(document.body, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false}
]
});">
</script>💡 이 스크립트는 $...$ 또는 $$...$$로 감싼 수식을 자동으로 감지하고 렌더링해줍니다.
✍️ 수식 입력 예시
▶ 인라인 수식 (본문 중간에 넣는 방식)
$E = mc^2$결과:
👉 E = mc²
▶ 디스플레이 수식 (가운데 정렬되는 블록 형태)
$$
d(x, y) = \sqrt{\sum_{i=1}^{n}(x_i - y_i)^2}
$$결과:
👉
d(x,y)=∑i=1n(xi−yi)2d(x, y) = \sqrt{\sum_{i=1}^{n}(x_i - y_i)^2}
📌 주의사항
- 미리보기에서는 수식이 제대로 보이지 않을 수 있습니다.
→ 실제 블로그 포스트로 발행 후 확인하세요. - 티스토리 에디터에서는 HTML/텍스트 모드를 사용하는 것이 안전합니다.
- 글에 수식이 많은 경우 페이지 로딩이 살짝 느려질 수 있으니 중요한 수식만 표시하는 것도 팁!
✅ 마무리 요약
항목설명
| 렌더링 도구 | KaTeX |
| 설정 위치 | HTML/CSS 편집 > </head> 바로 위 |
| 인라인 수식 | $ 수식 $ |
| 블록 수식 | $$ 수식 $$ |
| 미리보기 | 발행 후 확인 필수 |
🔗 참고 링크
KaTeX – The fastest math typesetting library for the web
Simple API, no dependencies – yet super fast on all major browsers.
katex.org
728x90
반응형
'취미라이프' 카테고리의 다른 글
| 나만의 캐릭터를 만드는 신박한 방법! (0) | 2025.04.03 |
|---|---|
| 나이키 에어맥스 플러스 TN 리뷰｜화이트 블랙 볼트 & 파리 생제르맹 콜라보 (0) | 2025.03.30 |
| 늦게라도 구매한 다이소 메탈릭 아크릴 마커펜 (0) | 2025.03.18 |
| 2025 충주그란폰도 져지 사이즈는 (0) | 2025.02.08 |
| 샤카웨어 맥스 헤비웨이트 반팔 티셔츠 vs 자바나스 익스트림 USA코튼 티셔츠 - 상품리뷰 (0) | 2025.02.03 |
