From bf93e2cf45aaef4065c8238d47113bb298a88548 Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 22:39:05 -0500
Subject: [PATCH] feat: install @rehype-pretty/transformers + configure dual
 themes

- Add @rehype-pretty/transformers dependency
- Add transformerCopyButton import
- Replace github-dark single theme with github-light/github-dark-dimmed dual theme
- Add keepBackground: false, grid: true, onVisitLine fix
- Add onVisitTitle with VS Code dot indicators (red/yellow/green)
- Add transformerCopyButton with visibility hover and 2.5s feedback
---
 app/posts/[slug]/page.tsx | 40 ++++++++++++++++++++++++++++++++++++++-
 package.json              |  1 +
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 2939c43..021b3f5 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -5,6 +5,7 @@ import remarkMath from 'remark-math'
 import remarkGfm from 'remark-gfm'
 import smartypants from 'remark-smartypants'
 import rehypePrettyCode from 'rehype-pretty-code'
+import { transformerCopyButton } from '@rehype-pretty/transformers'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeKatex from 'rehype-katex'
 import rehypeSlug from 'rehype-slug'
@@ -75,7 +76,44 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
                         rel: ['nofollow', 'noopener', 'noreferrer'],
                       }],
                       rehypeAutolinkHeadings,
-                      [rehypePrettyCode, { theme: 'github-dark' }],
+                      [rehypePrettyCode, {
+                        theme: {
+                          light: 'github-light',
+                          dark: 'github-dark-dimmed',
+                        },
+                        keepBackground: false,
+                        grid: true,
+                        onVisitLine(node: { children: any[] }) {
+                          if (node.children.length === 0) {
+                            node.children = [{ type: 'text', value: ' ' }];
+                          }
+                        },
+                        onVisitTitle(element: any) {
+                          element.properties.className = [
+                            ...(element.properties.className ?? []),
+                            'vscode-title',
+                          ];
+                          element.children = [
+                            {
+                              type: 'element',
+                              tagName: 'span',
+                              properties: { className: ['vscode-dots'] },
+                              children: [
+                                { type: 'element', tagName: 'span', properties: { className: ['dot-red'] }, children: [] },
+                                { type: 'element', tagName: 'span', properties: { className: ['dot-yellow'] }, children: [] },
+                                { type: 'element', tagName: 'span', properties: { className: ['dot-green'] }, children: [] },
+                              ],
+                            },
+                            element.children[0],
+                          ];
+                        },
+                        transformers: [
+                          transformerCopyButton({
+                            visibility: 'hover',
+                            feedbackDuration: 2_500,
+                          }),
+                        ],
+                      }],
                       rehypeKatex,
                     ],
                   },
diff --git a/package.json b/package.json
index 9b1e854..726a2b9 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@mdx-js/react": "^3.1.1",
+    "@rehype-pretty/transformers": "^0.13.2",
     "@wrksz/themes": "^0.9.3",
     "gray-matter": "^4.0.3",
     "katex": "^0.17.0",