Migrate to Sätteri md renderer

astro.config.mjs

@@ -1,10 +1,9 @@
 import { defineConfig, fontProviders } from "astro/config";
-import { unified } from '@astrojs/markdown-remark';
+import { satteri } from '@astrojs/markdown-satteri';
 import icon from "astro-icon";
 import mdx from "@astrojs/mdx";
-import remarkMath from "remark-math";
-import rehypeMathjax from "rehype-mathjax"
-import rehypeCallouts from "rehype-callouts";
+import satteriCallouts from "satteri-callouts"
+import { satteriKatex } from "satteri-katex";
 import mermaid from "astro-mermaid";
 
 export default defineConfig({
@@ -29,9 +28,14 @@ export default defineConfig({
     mdx()
   ],
   markdown: {
-    processor: unified({
-      remarkPlugins: [remarkMath],
-      rehypePlugins: [rehypeMathjax, [rehypeCallouts, { theme: "obsidian" }]],
+    processor: satteri({
+      features: {
+        math: true,
+        rawHtml: true,
+        smartPunctuation: true,
+      },
+      mdastPlugins: [satteriKatex()],
+      hastPlugins: [satteriCallouts({theme: "obsidian"})],
     }),
     shikiConfig: {
         theme: "one-dark-pro",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "c0ntroller.de",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "engines": {
     "node": ">=22.12.0"
   },
@@ -12,7 +12,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/markdown-remark": "^7.3.0",
     "@astrojs/mdx": "^8.0.0",
     "@iconify-json/lucide": "^1.2.98",
     "@iconify-json/simple-icons": "^1.2.74",
@@ -21,9 +20,9 @@
     "astro-icon": "^1.1.5",
     "astro-mermaid": "^2.1.0",
     "mermaid": "^11.17.2",
-    "rehype-callouts": "^2.1.2",
-    "rehype-mathjax": "^7.1.0",
-    "remark-math": "^6.0.0"
+    "satteri-callouts": "^1.0.1",
+    "satteri-katex": "^0.1.1",
+    "satteri-mathjax": "^0.1.0"
   },
   "devDependencies": {
     "sharp": "^0.35.4"

src/pages/blog/[...slug].astro

@@ -3,7 +3,7 @@ import { getCollection, render } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import "katex/dist/katex.min.css";
 // @ts-expect-error Theme is not provided as ".css"
-import "rehype-callouts/theme/obsidian";
+import "satteri-callouts/theme/obsidian";
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection('blog');

src/pages/book/[...slug].astro

@@ -4,7 +4,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import BookNavigation from '../../components/BookNavigation.astro';
 import "katex/dist/katex.min.css";
 // @ts-expect-error Theme is not provided as ".css"
-import "rehype-callouts/theme/obsidian";
+import "satteri-callouts/theme/obsidian";
 import "../../styles/md-custom.css";
 
 export async function getStaticPaths() {

src/pages/portfolio/[...slug].astro

@@ -4,7 +4,7 @@ import { Icon } from "astro-icon/components";
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import "katex/dist/katex.min.css";
 // @ts-expect-error Theme is not provided as ".css"
-import "rehype-callouts/theme/obsidian";
+import "satteri-callouts/theme/obsidian";
 
 export async function getStaticPaths() {
   const portfolioEntries = await getCollection('portfolio');