Skip to content

Commit b51a055

Browse files
satnaingsatnaing
authored
docs: update LaTeX equations guide in Astro blog posts (#461)
1 parent 4b730b1 commit b51a055

1 file changed

Lines changed: 83 additions & 46 deletions

File tree

‎src/data/blog/how-to-add-latex-equations-in-blog-posts.md‎

Lines changed: 83 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,108 @@
11
---
22
author: Alberto Perdomo
33
pubDatetime: 2024-09-08T20:58:52.737Z
4-
title: Adding LaTeX Equations in AstroPaper blog posts
5-
featured: false
4+
modDatetime: 2025-03-09T09:24:07.841Z
5+
title: How to add LaTeX Equations in Astro blog posts
66
tags:
7-
- rendering
87
- docs
9-
description: How to use LaTeX equations in your Markdown files for AstroPaper.
8+
description: Learn how to add LaTeX equations in Astro blog posts using Markdown, KaTeX, and remark/rehype plugins.
109
---
1110

1211
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.
1312

13+
<figure>
14+
<img
15+
src="https://images.pexels.com/photos/22690748/pexels-photo-22690748/free-photo-of-close-up-of-complicated-equations-written-on-a-blackboard.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
16+
alt="Free Close-up of complex equations on a chalkboard, showcasing chemistry and math symbols. Stock Photo"
17+
/>
18+
<figcaption class="text-center">
19+
Photo by <a href="https://www.pexels.com/photo/close-up-of-complicated-equations-written-on-a-blackboard-22690748/">Vitaly Gariev</a>
20+
</figcaption>
21+
</figure>
22+
1423
## Table of contents
1524

1625
## Instructions
1726

1827
In this section, you will find instructions on how to add support for LaTeX in your Markdown files for AstroPaper.
1928

20-
1. Install the necessary remark and rehype plugins by running `npm install rehype-katex remark-math katex`.
29+
1. Install the necessary remark and rehype plugins by running:
30+
31+
```bash
32+
pnpm install rehype-katex remark-math katex
33+
```
2134

2235
2. Update the Astro configuration (`astro.config.ts`) to use the these plugins:
2336

24-
```ts
25-
// other imports
26-
import remarkMath from "remark-math";
27-
import rehypeKatex from "rehype-katex";
28-
29-
export default defineConfig({
30-
// other configs
31-
markdown: {
32-
remarkPlugins: [
33-
remarkMath,
34-
remarkToc,
35-
[
36-
remarkCollapse,
37-
{
38-
test: "Table of contents",
39-
},
40-
],
41-
],
42-
rehypePlugins: [rehypeKatex],
43-
// other markdown configs
44-
},
45-
// other configs
46-
});
47-
```
37+
```ts
38+
// other imports
39+
import remarkMath from "remark-math";
40+
import rehypeKatex from "rehype-katex";
41+
42+
export default defineConfig({
43+
// other configs
44+
markdown: {
45+
remarkPlugins: [
46+
remarkMath, // <- new plugin
47+
remarkToc,
48+
[remarkCollapse, { test: "Table of contents" }],
49+
],
50+
rehypePlugins: [rehypeKatex], // <- new plugin
51+
shikiConfig: {
52+
// For more themes, visit https://shiki.style/themes
53+
themes: { light: "min-light", dark: "night-owl" },
54+
wrap: true,
55+
},
56+
},
57+
// other configs
58+
});
59+
```
4860

4961
3. Import KaTeX CSS in the main layout file `src/layouts/Layout.astro`
5062

51-
```astro
52-
---
53-
import { LOCALE, SITE } from "@config";
63+
```astro
64+
---
65+
import { LOCALE, SITE } from "@config";
5466
55-
// astro code
56-
---
67+
// astro code
68+
---
5769
58-
<!doctype html>
59-
<!-- others... -->
60-
<script is:inline src="/toggle-theme.js"></script>
61-
<link
62-
rel="stylesheet"
63-
href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
64-
/>
65-
66-
<body>
67-
<slot />
68-
</body>
69-
```
70+
<!doctype html>
71+
<!-- others... -->
72+
<script is:inline src="/toggle-theme.js"></script>
73+
74+
<link
75+
rel="stylesheet"
76+
href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
77+
/>
78+
79+
<body>
80+
<slot />
81+
</body>
82+
```
83+
84+
4. As the last step, add a text-color for `katex` in `src/styles/typography.css`.
85+
86+
```css
87+
@plugin '@tailwindcss/typography';
88+
89+
@layer base {
90+
/* other classes */
91+
92+
/* Katex text color */
93+
.prose .katex-display {
94+
@apply text-foreground;
95+
}
96+
97+
/* ===== Code Blocks & Syntax Highlighting ===== */
98+
/* other classes */
99+
}
100+
```
70101

71102
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.
72103

104+
---
105+
73106
## Inline Equations
74107

75108
Inline equations are written between single dollar signs `$...$`. Here are some examples:
@@ -78,6 +111,8 @@ Inline equations are written between single dollar signs `$...$`. Here are some
78111
2. The quadratic formula: `$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$`
79112
3. Euler's identity: `$e^{i\pi} + 1 = 0$`
80113

114+
---
115+
81116
## Block Equations
82117

83118
For more complex equations or when you want the equation to be displayed on its own line, use double dollar signs `$$...$$`:
@@ -107,6 +142,8 @@ $$
107142
$$
108143
```
109144

145+
---
146+
110147
## Using Mathematical Symbols
111148

112149
LaTeX provides a wide range of mathematical symbols:

0 commit comments

Comments
 (0)