improve mdx

app/routes/_site+/blog_.$slug.tsx

@@ -11,13 +11,19 @@ import {
 	GeneralErrorBoundary,
 	generalNotFoundHandler,
 } from '#app/components/error-boundary.tsx'
+import shikiStylesheet from '#app/styles/shiki.css?url'
 import { posts as config } from '#app/utils/content/config.ts'
 import { bundleMDX } from '#app/utils/content/mdx/bundler.server.ts'
 import { getMdxSource } from '#app/utils/content/mdx/mdx.server.ts'
 import { useMdxComponent } from '#app/utils/content/mdx/mdx.tsx'
 import { retrieve, retrieveAll } from '#app/utils/content/retrieve.ts'
 import { pipeHeaders } from '#app/utils/remix.server'
 import { ServerTiming } from '#app/utils/timings.server'
+import { type Route } from './+types/blog_.$slug'
+
+export const links: Route.LinksFunction = () => [
+	{ rel: 'stylesheet', href: shikiStylesheet },
+]
 
 export const handle: SEOHandle = {
 	getSitemapEntries: serverOnly$(async () => {

app/styles/shiki.css

@@ -0,0 +1,9 @@
+html.dark .shiki,
+html.dark .shiki span {
+	color: var(--shiki-dark) !important;
+	background-color: var(--shiki-dark-bg) !important;
+	/* Optional, if you also want font styles */
+	font-style: var(--shiki-dark-font-style) !important;
+	font-weight: var(--shiki-dark-font-weight) !important;
+	text-decoration: var(--shiki-dark-text-decoration) !important;
+}

app/utils/content/mdx/bundler.server.ts

@@ -1,7 +1,10 @@
 import { remember } from '@epic-web/remember'
+import rehypeShiki from '@shikijs/rehype'
 import { bundleMDX as _bundleMDX } from 'mdx-bundler'
 import { type BundleMDX } from 'mdx-bundler/dist/types'
 import PQueue from 'p-queue'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+import rehypeSlug from 'rehype-slug'
 import { cachified, longLivedCache } from '#app/utils/cache.server.ts'
 import { type ServerTiming } from '#app/utils/timings.server.ts'
 
@@ -16,7 +19,20 @@ async function bundleMDX({ source, files }: MdxSource) {
 		files,
 		mdxOptions(options) {
 			options.remarkPlugins = [...(options.remarkPlugins ?? [])]
-			options.rehypePlugins = [...(options.rehypePlugins ?? [])]
+			options.rehypePlugins = [
+				...(options.rehypePlugins ?? []),
+				[
+					rehypeShiki,
+					{
+						themes: {
+							light: 'catppuccin-latte',
+							dark: 'tokyo-night',
+						},
+					},
+				],
+				rehypeSlug,
+				[rehypeAutolinkHeadings, { behavior: 'wrap' }],
+			]
 			return options
 		},
 	})

package.json

@@ -56,6 +56,7 @@
     "@sentry/react": "8.50.0",
     "@sentry/remix": "8.47.0",
     "@sentry/vite-plugin": "2.22.7",
+    "@shikijs/rehype": "2.2.0",
     "@testing-library/dom": "10.4.0",
     "@tusbar/cache-control": "1.0.2",
     "address": "2.0.3",
@@ -88,6 +89,8 @@
     "react-dom": "^19.0.0",
     "react-router": "7.1.1",
     "reading-time": "1.5.0",
+    "rehype-autolink-headings": "7.1.0",
+    "rehype-slug": "6.0.0",
     "remix-auth": "4.1.0",
     "remix-auth-discord": "1.4.1",
     "remix-auth-github": "3.0.2",