fix: add syntax highlighting to blog code blocks (#13)

ajbozarth · web-flow · commit b0a3e96907bd · 2026-04-16T20:35:10.000-05:00
* fix: add syntax highlighting to blog code blocks

Signed-off-by: Alex Bozarth &lt;ajbozart@us.ibm.com&gt;

* fix: guard rehype-highlight against unrecognized language tags

Passes `ignoreMissing: true` so fenced code blocks with unrecognized
language identifiers (e.g. mermaid, pseudocode) do not throw during build.

Signed-off-by: Alex Bozarth &lt;ajbozart@us.ibm.com&gt;

---------

Signed-off-by: Alex Bozarth &lt;ajbozart@us.ibm.com&gt;
diff --git a/src/app/blogs/[slug]/page.tsx b/src/app/blogs/[slug]/page.tsx
@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeSlug from 'rehype-slug';
+import rehypeHighlight from 'rehype-highlight';
 import { getBlog, getAllBlogSlugs } from '@/lib/blogs';
 import { siteConfig } from '@/config/site';
 
@@ -79,7 +80,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
         <div className="prose">
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
-            rehypePlugins={[rehypeSlug]}
+            rehypePlugins={[rehypeSlug, [rehypeHighlight, { ignoreMissing: true }]]}
           >
             {blog.content}
           </ReactMarkdown>
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,6 +1,9 @@
 /* IBM Plex + developer theme — light/dark via prefers-color-scheme */
 /* Fonts loaded via next/font in layout.tsx — CSS vars set on <body> */
 
+@import 'highlight.js/styles/github-dark.css';
+@import 'highlight.js/styles/github.css' (prefers-color-scheme: light);
+
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
