Pakai LaTeX di Astro? Disa Dong...

Artikel ini akan mencontohkan caranya menggunakan LaTeX equations di dalam file Markdown untuk tema AstroPaper. LaTeX adalah typesetting system yang umum digunakan untuk menulis persamaan matematika dan rumus-rumus saintifik

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

Rangkuman Isi

Langkah-langkah

Di bagian ini, kamu akan mendapatkan instruksi untuk menambahkan dukungan LaTeX di file Markdown-mu untuk tema AstroPaper.

Install plugin remark dan rehype dengan prompt:

pnpm install rehype-katex remark-math katex

Perbarui konfigurasi Astro (astro.config.ts) untuk menggunakan plugin tersebut:

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

export default defineConfig({
  // other configs
  markdown: {
    remarkPlugins: [
      remarkMath, // <- new plugin
      remarkToc,
      [remarkCollapse, { test: "Table of contents" }],
    ],
    rehypePlugins: [rehypeKatex], // <- new plugin
    shikiConfig: {
      // For more themes, visit https://shiki.style/themes
      themes: { light: "min-light", dark: "night-owl" },
      wrap: true,
    },
  },
  // other configs
});

Import KaTeX CSS ke file main layout project Astro-mu src/layouts/Layout.astro

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

// astro code
---

<!doctype html>
<!-- others... -->
<script is:inline src="/toggle-theme.js"></script>

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

<body>
  <slot />
</body>

Langkah terakir, tambahkan text-color untuk katex di src/styles/typography.css.

@plugin '@tailwindcss/typography';

@layer base {
  /* other classes */

  /* Katex text color */
  .prose .katex-display {
    @apply text-foreground;
  }

  /* ===== Code Blocks & Syntax Highlighting ===== */
  /* other classes */
}

dan voilà, setup ini memungkinkanmu untuk menulis LaTeX equations di file Markdown, yang mana akan dirender saat proses build. Setelah melakukan langkah-langkah di atas, seluruh persamaan LaTeX akan ditampilkan sebagaimana mestinya.

Inline Equations

Inline equations atau persamaan satu-baris ditulis diantara tkamu baca dollar $...$ . Berikut contohnya:

Rumus dari teori relativitas Einstein: $E = mc^2$
Persamaan kuadrat: $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$
Pesamaan Euler: $e^{i\pi} + 1 = 0$

Block Equations

Untuk persamaan yang lebih kompleks atau perlu beberapa baris untuk keterbacaan, gunakan tkamu baca dollar dobel $$...$$:

Integral Gauss:

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

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

Definisi dari fungsi zeta Riemann:

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

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

Persamaan Maxwell bentuk diferensial:

$$
\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}
$$

akan ditampilkan sebagai

\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}

Menggunakan Simbol Matematika

LaTeX menyediakan cakupan yang luas untuk simbol-simbol matematika:

Abjad Yunani: $\alpha$ , $\beta$ , $\gamma$ , $\delta$ , $\epsilon$ , $\pi$
Operator matematika: $\sum$ , $\prod$ , $\int$ , $\partial$ , $\nabla$
Relasi: $\leq$ , $\geq$ , $\approx$ , $\sim$ , $\propto$
Simbol logika: $\forall$ , $\exists$ , $\neg$ , $\wedge$ , $\vee$