Add code diff highlighting feature

Implements #154 - Add ability to highlight code differences within lines

Features:
- New diff mode toggle in controls panel
- Automatic detection of + and - prefixed lines
- Visual styling with green background for additions
- Visual styling with red background for deletions
- Diff markers (+ and -) displayed at line start
- URL state persistence for diff mode
- Works seamlessly with existing line highlighting

Technical implementation:
- Added diffModeAtom to store for state management
- Extended Shiki transformer to detect and style diff lines
- Created DiffModeControl component with Switch UI
- Added CSS styling for diff-add and diff-remove classes
- Integrated with existing code highlighting system

Author: TanweerACB

app/(navigation)/(code)/components/Controls.tsx

@@ -8,6 +8,7 @@ import LanguageControl from "./LanguageControl";
 import PaddingControl from "./PaddingControl";
 import ThemeControl from "./ThemeControl";
 import LineNumberControl from "./LineNumberControl";
+import { DiffModeControl } from "./DiffModeControl";
 
 const Controls: React.FC = () => {
   return (
@@ -16,6 +17,7 @@ const Controls: React.FC = () => {
       <BackgroundControl />
       <DarkModeControl />
       <LineNumberControl />
+      <DiffModeControl />
       <PaddingControl />
       <LanguageControl />
     </div>

app/(navigation)/(code)/components/DiffModeControl.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useAtom } from "jotai";
+import { diffModeAtom } from "../store";
+import { Switch } from "@/components/switch";
+
+export function DiffModeControl() {
+  const [diffMode, setDiffMode] = useAtom(diffModeAtom);
+
+  return (
+    <div className="flex items-center gap-2">
+      <label htmlFor="diff-mode" className="text-sm text-gray-11 cursor-default">
+        Diff
+      </label>
+      <Switch id="diff-mode" checked={diffMode} onCheckedChange={setDiffMode} />
+    </div>
+  );
+}

app/(navigation)/(code)/components/Editor.module.css

@@ -48,6 +48,32 @@
       content: "";
     }
   }
+
+  :global(.diff-add) {
+    background-color: rgba(46, 160, 67, 0.15) !important;
+
+    &:before {
+      position: absolute;
+      left: 0;
+      padding-left: 8px;
+      color: rgba(46, 160, 67, 0.8);
+      content: "+";
+      font-weight: 600;
+    }
+  }
+
+  :global(.diff-remove) {
+    background-color: rgba(248, 81, 73, 0.15) !important;
+
+    &:before {
+      position: absolute;
+      left: 0;
+      padding-left: 8px;
+      color: rgba(248, 81, 73, 0.8);
+      content: "-";
+      font-weight: 600;
+    }
+  }
 }
 
 .isHighlightingLines {

app/(navigation)/(code)/components/HighlightedCode.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { Language, LANGUAGES } from "../util/languages";
 
 import styles from "./Editor.module.css";
-import { highlightedLinesAtom, highlighterAtom, loadingLanguageAtom } from "../store";
+import { highlightedLinesAtom, highlighterAtom, loadingLanguageAtom, diffModeAtom } from "../store";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { themeDarkModeAtom, themeAtom } from "../store/themes";
 
@@ -17,6 +17,7 @@ const HighlightedCode: React.FC<PropTypes> = ({ selectedLanguage, code }) => {
   const highlighter = useAtomValue(highlighterAtom);
   const setIsLoadingLanguage = useSetAtom(loadingLanguageAtom);
   const highlightedLines = useAtomValue(highlightedLinesAtom);
+  const diffMode = useAtomValue(diffModeAtom);
   const darkMode = useAtomValue(themeDarkModeAtom);
   const theme = useAtomValue(themeAtom);
   const themeName = theme.id === "tailwind" ? (darkMode ? "tailwind-dark" : "tailwind-light") : "css-variables";
@@ -49,6 +50,16 @@ const HighlightedCode: React.FC<PropTypes> = ({ selectedLanguage, code }) => {
             line(node, line) {
               node.properties["data-line"] = line;
               if (highlightedLines.includes(line)) this.addClassToHast(node, "highlighted-line");
+
+              // Handle diff mode
+              if (diffMode) {
+                const lineContent = code.split("\n")[line - 1];
+                if (lineContent?.startsWith("+")) {
+                  this.addClassToHast(node, "diff-add");
+                } else if (lineContent?.startsWith("-")) {
+                  this.addClassToHast(node, "diff-remove");
+                }
+              }
             },
           },
         ],
@@ -58,7 +69,16 @@ const HighlightedCode: React.FC<PropTypes> = ({ selectedLanguage, code }) => {
     generateHighlightedHtml().then((newHtml) => {
       setHighlightedHtml(newHtml);
     });
-  }, [code, selectedLanguage, highlighter, setIsLoadingLanguage, setHighlightedHtml, highlightedLines, themeName]);
+  }, [
+    code,
+    selectedLanguage,
+    highlighter,
+    setIsLoadingLanguage,
+    setHighlightedHtml,
+    highlightedLines,
+    themeName,
+    diffMode,
+  ]);
 
   return (
     <div

app/(navigation)/(code)/store/index.ts

@@ -29,3 +29,5 @@ export const highlightedLinesAtom = atomWithHash<number[]>("highlightedLines", [
     return str ? str.split(",").map(Number) : [];
   },
 });
+
+export const diffModeAtom = atomWithHash<boolean>("diff", false);