mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 19:41:02 +08:00
docs: update LaTeX equations guide in Astro blog posts (#461)
This commit is contained in:
Sat Naing
@@ -1,75 +1,108 @@
|
||||
---
|
||||
author: Alberto Perdomo
|
||||
pubDatetime: 2024-09-08T20:58:52.737Z
|
||||
title: Adding LaTeX Equations in AstroPaper blog posts
|
||||
featured: false
|
||||
modDatetime: 2025-03-09T09:24:07.841Z
|
||||
title: How to add LaTeX Equations in Astro blog posts
|
||||
tags:
|
||||
- rendering
|
||||
- docs
|
||||
description: How to use LaTeX equations in your Markdown files for AstroPaper.
|
||||
description: 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.
|
||||
|
||||
<figure>
|
||||
<img
|
||||
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"
|
||||
alt="Free Close-up of complex equations on a chalkboard, showcasing chemistry and math symbols. Stock Photo"
|
||||
/>
|
||||
<figcaption class="text-center">
|
||||
Photo by <a href="https://www.pexels.com/photo/close-up-of-complicated-equations-written-on-a-blackboard-22690748/">Vitaly Gariev</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
## Table of contents
|
||||
|
||||
## Instructions
|
||||
|
||||
In this section, you will find instructions on how to add support for LaTeX in your Markdown files for AstroPaper.
|
||||
|
||||
1. Install the necessary remark and rehype plugins by running `npm install rehype-katex remark-math katex`.
|
||||
1. Install the necessary remark and rehype plugins by running:
|
||||
|
||||
```bash
|
||||
pnpm install rehype-katex remark-math katex
|
||||
```
|
||||
|
||||
2. Update the Astro configuration (`astro.config.ts`) to use the these plugins:
|
||||
|
||||
```ts
|
||||
// other imports
|
||||
import remarkMath from "remark-math";
|
||||
import rehypeKatex from "rehype-katex";
|
||||
```ts
|
||||
// other imports
|
||||
import remarkMath from "remark-math";
|
||||
import rehypeKatex from "rehype-katex";
|
||||
|
||||
export default defineConfig({
|
||||
// other configs
|
||||
markdown: {
|
||||
remarkPlugins: [
|
||||
remarkMath,
|
||||
remarkToc,
|
||||
[
|
||||
remarkCollapse,
|
||||
{
|
||||
test: "Table of contents",
|
||||
},
|
||||
],
|
||||
],
|
||||
rehypePlugins: [rehypeKatex],
|
||||
// other markdown configs
|
||||
},
|
||||
// other configs
|
||||
});
|
||||
```
|
||||
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
|
||||
});
|
||||
```
|
||||
|
||||
3. Import KaTeX CSS in the main layout file `src/layouts/Layout.astro`
|
||||
|
||||
```astro
|
||||
---
|
||||
import { LOCALE, SITE } from "@config";
|
||||
```astro
|
||||
---
|
||||
import { LOCALE, SITE } from "@config";
|
||||
|
||||
// astro code
|
||||
---
|
||||
// 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"
|
||||
/>
|
||||
<!doctype html>
|
||||
<!-- others... -->
|
||||
<script is:inline src="/toggle-theme.js"></script>
|
||||
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
```
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
|
||||
/>
|
||||
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
```
|
||||
|
||||
4. As the last step, add a text-color for `katex` in `src/styles/typography.css`.
|
||||
|
||||
```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:
|
||||
@@ -78,6 +111,8 @@ Inline equations are written between single dollar signs `$...$`. Here are some
|
||||
2. The quadratic formula: `$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$`
|
||||
3. 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 `$$...$$`:
|
||||
@@ -107,6 +142,8 @@ $$
|
||||
$$
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Using Mathematical Symbols
|
||||
|
||||
LaTeX provides a wide range of mathematical symbols:
|
||||
|
||||
Reference in New Issue
Block a user