Sat Naing
5cff7c50b9
* refactor: replace embedded svg with svg icon * feat: add global and per-post timezone support - add `SITE.timezone` in config to define a global default timezone. - allow per-post timezone overrides via `timezone` in frontmatter. - update date formatting logic to use the correct timezone when rendering timestamps. - ensure that posts without a timezone fallback to `SITE.timezone`. - improve consistency between local and deployed timezones. * refactor: replace `LOCALE` constant with `SITE.lang` * docs: update guides * fix: update code word-break inside markdown table Closes #466
4.3 KiB
author, pubDatetime, modDatetime, title, tags, description
| author | pubDatetime | modDatetime | title | tags | description | |
|---|---|---|---|---|---|---|
| Alberto Perdomo | 2024-09-08T20:58:52.737Z | 2025-03-22T09:25:46.734Z | How to add LaTeX Equations in Astro blog posts |
|
Learn how to add LaTeX equations in Astro blog posts using Markdown, KaTeX, and remark/rehype plugins. |
This document demonstrates how to use LaTeX equations in your Markdown files for AstroPaper. LaTeX is a powerful typesetting system often used for mathematical and scientific documents.
Table of contents
Instructions
In this section, you will find instructions on how to add support for LaTeX in your Markdown files for AstroPaper.
-
Install the necessary remark and rehype plugins by running:
pnpm install rehype-katex remark-math katex -
Update the Astro configuration (
astro.config.ts) to use the these plugins:// 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 in the main layout file
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> -
As the last step, add a text-color for
katexinsrc/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 */ }
And voilà, this setup allows you to write LaTeX equations in your Markdown files, which will be rendered properly when the site is built. Once you do it, the rest of the document will appear rendered correctly.
Inline Equations
Inline equations are written between single dollar signs $...$. Here are some examples:
- The famous mass-energy equivalence formula:
$E = mc^2$ - The quadratic formula:
$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ - Euler's identity:
$e^{i\pi} + 1 = 0$
Block Equations
For more complex equations or when you want the equation to be displayed on its own line, use double dollar signs $$...$$:
The Gaussian integral:
$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$
The definition of the Riemann zeta function:
$$ \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} $$
Maxwell's equations in differential form:
$$
\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}
$$
Using Mathematical Symbols
LaTeX provides a wide range of mathematical symbols:
- Greek letters:
$\alpha$,$\beta$,$\gamma$,$\delta$,$\epsilon$,$\pi$ - Operators:
$\sum$,$\prod$,$\int$,$\partial$,$\nabla$ - Relations:
$\leq$,$\geq$,$\approx$,$\sim$,$\propto$ - Logical symbols:
$\forall$,$\exists$,$\neg$,$\wedge$,$\vee$