Astro 블로그 글에 LaTeX 수식 추가하는 방법

이 문서에서는 AstroPaper의 마크다운 파일에서 LaTeX 수식을 사용하는 방법을 설명합니다. LaTeX는 수학 및 과학 문서에서 자주 사용되는 강력한 조판 시스템입니다.

Free Close-up of complex equations on a chalkboard, showcasing chemistry and math symbols. Stock Photo — Photo by Vitaly Gariev

설정 방법

이 섹션에서는 AstroPaper의 마크다운 파일에 LaTeX 지원을 추가하는 방법을 안내합니다.

필요한 remark 및 rehype 플러그인을 설치합니다:
```
pnpm install rehype-katex remark-math katex
```

Astro 설정을 업데이트하여 이 플러그인들을 사용합니다:

// ...
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

export default defineConfig({
  // ...
  markdown: {
    remarkPlugins: [
      remarkMath,
      remarkToc,
      [remarkCollapse, { test: "목차" }],
    ],
    rehypePlugins: [rehypeKatex],
    shikiConfig: {
      // 더 많은 테마는 https://shiki.style/themes 를 참고하세요
      themes: { light: "min-light", dark: "night-owl" },
      wrap: false,
    },
  },
  // ...
});astro.config.ts

메인 레이아웃 파일에 KaTeX CSS를 import합니다.

---
import { SITE } from "@config";

// astro 코드
---

<!doctype html>
<!-- 기타 요소 -->
<meta property="og:image" content={socialImageURL} />

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
/>

<body>
  <slot />
</body>src/layouts/Layout.astro

마지막 단계로, typography.css에 katex의 텍스트 색상을 추가합니다.

@plugin "@tailwindcss/typography";

@layer base {
  /* 기타 클래스 */

  /* Katex 텍스트 색상 */
  .prose .katex-display {
    @apply text-foreground;
  }

  /* ===== 코드 블록 & 구문 강조 ===== */
  /* 기타 클래스 */
}src/styles/typography.css

이렇게 설정하면 마크다운 파일에서 LaTeX 수식을 작성할 수 있으며, 사이트가 빌드될 때 올바르게 렌더링됩니다. 설정을 완료하면 이 문서의 나머지 부분이 올바르게 렌더링되어 표시됩니다.

인라인 수식

인라인 수식은 단일 달러 기호 $...$ 사이에 작성합니다. 다음은 몇 가지 예시입니다:

유명한 질량-에너지 등가 공식: $E = mc^2$
이차방정식의 근의 공식: $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$
오일러 항등식: $e^{i\pi} + 1 = 0$

블록 수식

더 복잡한 수식이나 수식을 독립된 줄에 표시하고 싶을 때는 이중 달러 기호 $$...$$를 사용합니다:

가우스 적분:

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

리만 제타 함수의 정의:

$$ \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} $$

미분 형태의 맥스웰 방정식:

$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0\left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}\right)
\end{aligned}
$$

수학 기호 사용

LaTeX는 다양한 수학 기호를 제공합니다:

그리스 문자: $\alpha$ , $\beta$ , $\gamma$ , $\delta$ , $\epsilon$ , $\pi$
연산자: $\sum$ , $\prod$ , $\int$ , $\partial$ , $\nabla$
관계 기호: $\leq$ , $\geq$ , $\approx$ , $\sim$ , $\propto$
논리 기호: $\forall$ , $\exists$ , $\neg$ , $\wedge$ , $\vee$