feat: add syntax highlighting and fix code alignment

2025-12-10 11:46:41 -08:00
parent 07aa12a042
commit bbac528845
6 changed files with 117 additions and 32 deletions
@@ -53,4 +53,31 @@ figcaption {
  @apply text-sm;
  @apply text-center;
  @apply italic;
+}
+
+pre {
+  @apply text-left;
+  @apply bg-gray-100;
+  @apply p-2;
+  @apply rounded-md;
+  @apply border;
+  @apply border-gray-300;
+  @apply overflow-x-auto;
+  @apply whitespace-pre-wrap;
+  @apply break-words;
+  @apply text-sm;
+  @apply font-mono;
+}
+
+code:not(pre code) {
+  @apply text-sm;
+  @apply font-mono;
+  @apply bg-gray-100;
+  @apply p-1;
+  @apply rounded-md;
+  @apply border;
+  @apply border-gray-300;
+  @apply overflow-x-auto;
+  @apply whitespace-pre-wrap;
+  @apply break-words;
 }
@@ -11,19 +11,18 @@ import type { JSX, ReactNode } from "react";
 import "./globals.css";

 // eslint-disable-next-line new-cap -- This is a function call.
-const inter = Inter({ subsets: [ "latin" ] });
+const inter = Inter({ subsets: ["latin"] });

 const metadata: Metadata = {
-  description:
-    "The personal musings of a transfem software engineer.",
+  description: "The personal musings of a transfem software engineer.",
  openGraph: {
    images: "https://cdn.nhcarrigan.com/og-image.png",
  },
-  title:   "Naomi's Blog",
+  title: "Naomi's Blog",
  twitter: {
-    card:   "summary_large_image",
+    card: "summary_large_image",
    images: "https://cdn.nhcarrigan.com/og-image.png",
-    site:   "@naomi_lgbt",
+    site: "@naomi_lgbt",
  },
 };

@@ -48,14 +47,12 @@ const RootLayout = ({
        strategy={"afterInteractive"}
        type="text/javascript"
      ></Script>
+      <link href="https://cdn.nhcarrigan.com/logo.png" rel="icon" sizes="any" />
      <link
-        href="https://cdn.nhcarrigan.com/logo.png"
-        rel="icon"
-        sizes="any"
-      />
-      <body className={inter.className}>
-        {children}
-      </body>
+        rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"
+      ></link>
+      <body className={inter.className}>{children}</body>
    </html>
  );
 };
@@ -7,6 +7,7 @@
 import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
 import type { JSX } from "react";
 import { Rule } from "@/components/rule";
 import { getPostData } from "@/lib/posts";
@@ -34,7 +35,7 @@ const Page = async({
      <h2 className="text-center">{post.data.summary}</h2>
      <p className="text-center">{`A ${post.data.readtime}.`}</p>
      <Rule />
-      <Markdown rehypePlugins={[ rehypeRaw ]} remarkPlugins={[ remarkGfm ]}>
+      <Markdown rehypePlugins={[ rehypeRaw, rehypeHighlight ]} remarkPlugins={[ remarkGfm ]}>
        {post.content}
      </Markdown>
      <Rule />