docs(site): add changelog entry 2026-08-28 and restore changelog code highlighting

apps/site/src/app/changelog/[slug]/page.tsx

@@ -2,7 +2,9 @@ import type { Metadata } from "next";
 import { createPageMetadata } from "@/lib/page-metadata";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { MDXRemote } from "next-mdx-remote/rsc";
+import { MDXRemote, type MDXRemoteProps } from "next-mdx-remote/rsc";
+import { rehypeCode } from "fumadocs-core/mdx-plugins";
+import { PrismButton, PrismButtonOutline } from "@/components/brand/prism-button";
 import { ArrowRight } from "@/components/icons/forma";
 import { siteConfig } from "@/lib/config";
 import { getContentSlugs } from "@/lib/content";
@@ -12,6 +14,19 @@ type Props = {
   params: Promise<{ slug: string }>;
 };
 
+// next-mdx-remote ships no syntax highlighting of its own, so code blocks
+// rendered plain `<pre><code>`. Reuse fumadocs' rehype-code (the docs app's
+// pipeline: shiki, github-light/github-dark as `--shiki-*` CSS variables,
+// consumed in globals.css) and fall back to plain text for fences like
+// ```npm whose language shiki does not know.
+const mdxOptions: NonNullable<MDXRemoteProps["options"]>["mdxOptions"] = {
+  rehypePlugins: [[rehypeCode, { icon: false, tab: false, fallbackLanguage: "plaintext" }]],
+};
+
+// Components changelog MDX may use. PrismButton* are client components; RSC
+// serializes the reference, so passing them straight through is fine.
+const components = { PrismButton, PrismButtonOutline };
+
 export async function generateStaticParams() {
   return getContentSlugs("changelog").map((slug) => ({ slug }));
 }
@@ -59,7 +74,11 @@ export default async function ChangelogEntryPage({ params }: Props) {
         </h1>
 
         <div className="prose mt-10 max-w-none prose-headings:font-heading prose-a:text-prism-cyan-700 prose-img:rounded-xl prose-img:border prose-img:border-black/[0.06]">
-          <MDXRemote source={rewriteChangelogAssets(entry.content)} />
+          <MDXRemote
+            source={rewriteChangelogAssets(entry.content)}
+            components={components}
+            options={{ mdxOptions }}
+          />
         </div>
       </div>
     </article>

apps/site/src/app/globals.css

@@ -914,3 +914,30 @@ h6 {
     animation: none;
   }
 }
+
+/* Shiki code blocks (changelog MDX via fumadocs' rehype-code). Tokens carry
+   github-light / github-dark colors as `--shiki-light` / `--shiki-dark` CSS
+   variables; pick the one for the active theme. Typography's default pre
+   colors assume a dark block, so swap in the theme background too. */
+.prose pre.shiki {
+  background-color: var(--shiki-light-bg);
+  color: var(--shiki-light);
+  border: 1px solid rgb(0 0 0 / 0.08);
+}
+.prose pre.shiki code span {
+  color: var(--shiki-light);
+}
+.dark .prose pre.shiki {
+  background-color: var(--shiki-dark-bg);
+  color: var(--shiki-dark);
+}
+.dark .prose pre.shiki code span {
+  color: var(--shiki-dark);
+}
+
+/* Typography wraps inline code in literal backticks; the changelog already
+   styles <code> as a chip, so the quotes read as stray characters. */
+.prose :where(code):not(:where(pre *))::before,
+.prose :where(code):not(:where(pre *))::after {
+  content: none;
+}