Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: update LaTeX equations guide in Astro blog posts (#461)

Browse Source
This commit is contained in:
Sat Naing
2025-03-09 16:41:19 +07:00
committed by GitHub
parent 4b730b181d
commit b51a055e22
1 changed files with 81 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/data/blog/how-to-add-latex-equations-in-blog-posts.md
+71 -34
View File
@@ -1,75 +1,108 @@
--- ---
author: Alberto Perdomo author: Alberto Perdomo
pubDatetime: 2024-09-08T20:58:52.737Z pubDatetime: 2024-09-08T20:58:52.737Z
title: Adding LaTeX Equations in AstroPaper blog posts modDatetime: 2025-03-09T09:24:07.841Z
featured: false title: How to add LaTeX Equations in Astro blog posts
tags: tags:
- rendering
- docs - 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. 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 ## Table of contents
## Instructions ## Instructions
In this section, you will find instructions on how to add support for LaTeX in your Markdown files for AstroPaper. 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: 2. Update the Astro configuration (`astro.config.ts`) to use the these plugins:
```ts ```ts
// other imports // other imports
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex"; import rehypeKatex from "rehype-katex";
export default defineConfig({ export default defineConfig({
// other configs // other configs
markdown: { markdown: {
remarkPlugins: [ remarkPlugins: [
remarkMath, remarkMath, // <- new plugin
remarkToc, remarkToc,
[ [remarkCollapse, { test: "Table of contents" }],
remarkCollapse, ],
{ rehypePlugins: [rehypeKatex], // <- new plugin
test: "Table of contents", shikiConfig: {
// For more themes, visit https://shiki.style/themes
themes: { light: "min-light", dark: "night-owl" },
wrap: true,
}, },
],
],
rehypePlugins: [rehypeKatex],
// other markdown configs
}, },
// other configs // other configs
}); });
``` ```
3. Import KaTeX CSS in the main layout file `src/layouts/Layout.astro` 3. Import KaTeX CSS in the main layout file `src/layouts/Layout.astro`
```astro ```astro
--- ---
import { LOCALE, SITE } from "@config"; import { LOCALE, SITE } from "@config";
// astro code // astro code
--- ---
<!doctype html> <!doctype html>
<!-- others... --> <!-- others... -->
<script is:inline src="/toggle-theme.js"></script> <script is:inline src="/toggle-theme.js"></script>
<link
<link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css" href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
/> />
<body> <body>
<slot /> <slot />
</body> </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. 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
Inline equations are written between single dollar signs `$...$`. Here are some examples: 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}$` 2. The quadratic formula: `$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$`
3. Euler's identity: `$e^{i\pi} + 1 = 0$` 3. Euler's identity: `$e^{i\pi} + 1 = 0$`
---
## Block Equations ## Block Equations
For more complex equations or when you want the equation to be displayed on its own line, use double dollar signs `$$...$$`: 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 ## Using Mathematical Symbols
LaTeX provides a wide range of mathematical symbols: LaTeX provides a wide range of mathematical symbols: