Add math rendering to posts using KaTeX

README.md

@@ -39,6 +39,7 @@ Astro Cactus is a simple opinionated starter built with the Astro framework. Use
 - Auto-generated [sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/)
 - [Pagefind](https://pagefind.app/) static search library integration
 - [Astro Icon](https://github.com/natemoo-re/astro-icon) svg icon component
+- [KaTeX](https://katex.org/) integration for math rendering
 
 ## Demo 💻
 

astro.config.ts

@@ -3,6 +3,8 @@ import fs from "fs";
 import mdx from "@astrojs/mdx";
 import tailwind from "@astrojs/tailwind";
 import sitemap from "@astrojs/sitemap";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
 import remarkUnwrapImages from "remark-unwrap-images";
 import rehypeExternalLinks from "rehype-external-links";
 import { remarkReadingTime } from "./src/utils/remark-reading-time";
@@ -12,9 +14,14 @@ export default defineConfig({
 	// ! Please remember to replace the following site property with your own domain
 	site: "https://astro-cactus.chriswilliams.dev/",
 	markdown: {
-		remarkPlugins: [remarkUnwrapImages, remarkReadingTime],
+		remarkPlugins: [
+			remarkUnwrapImages,
+			remarkReadingTime,
+			[remarkMath, { singleDollarTextMath: false }],
+		],
 		rehypePlugins: [
 			[rehypeExternalLinks, { target: "_blank", rel: ["nofollow, noopener, noreferrer"] }],
+			rehypeKatex,
 		],
 		remarkRehype: { footnoteLabelProperties: { className: [""] } },
 		shikiConfig: {

package.json

@@ -19,6 +19,8 @@
 		"astro": "4.0.3",
 		"astro-icon": "^0.8.2",
 		"rehype-external-links": "^3.0.0",
+		"rehype-katex": "^7.0.0",
+		"remark-math": "^6.0.0",
 		"satori": "0.10.11",
 		"satori-html": "^0.3.2",
 		"sharp": "^0.33.0"

src/content/post/markdown-elements/index.md

@@ -78,6 +78,16 @@ Start numbering with offset:
 57. foo
 1. bar
 
+## Math
+
+An example in display mode:
+
+$$
+\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}
+$$
+
+An example of $$\LaTeX$$ inline with text $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$
+
 ## Code
 
 Inline `code`

src/layouts/BlogPost.astro

@@ -6,6 +6,8 @@ import BlogHero from "@/components/blog/Hero";
 import TOC from "@/components/blog/TOC";
 import WebMentions from "@/components/blog/webmentions/index";
 
+import "@/katex"; // KaTeX css file
+
 interface Props {
 	post: CollectionEntry<"post">;
 }

src/pages/index.astro

@@ -34,6 +34,11 @@ const cactusTech: Array<{ title: string; desc: string; href: string }> = [
 		desc: "Markdown for the component era.",
 		href: "https://mdxjs.com/",
 	},
+	{
+		title: "KaTeX",
+		desc: "The fastest math typesetting library for the web.",
+		href: "https://katex.org/",
+	},
 	{
 		title: "Satori",
 		desc: "Generating png Open Graph images for blog posts.",
@@ -87,8 +92,8 @@ const cactusTech: Array<{ title: string; desc: string; href: string }> = [
 							class="cactus-link inline-block"
 						>
 							{title}
-						</a>: 
-						<p class="inline-block sm:mt-2">{desc}</p>
+						</a>
+						:<p class="inline-block sm:mt-2">{desc}</p>
 					</li>
 				))
 			}

tsconfig.json

@@ -10,7 +10,8 @@
 			"@/utils": ["src/utils/index.ts"],
 			"@/stores/*": ["src/stores/*"],
 			"@/types": ["src/types.ts"],
-			"@/site-config": ["src/site.config.ts"]
+			"@/site-config": ["src/site.config.ts"],
+			"@/katex": ["node_modules/.pnpm/rehype-katex@7.0.0/node_modules/katex/dist/katex.min.css"]
 		}
 	},
 	"include": ["src", "*.ts"],