From 7b6293637c40b636c8c2d96ea9c1bbb8c6648f66 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 29 Jan 2026 08:44:18 -0500
Subject: [PATCH] Add diff language highlighting for code blocks (#11301)

* Initial plan

* Add diff language highlighting support

Co-authored-by: tommoor <380914+tommoor@users.noreply.github.com>

* Styling

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: tommoor <380914+tommoor@users.noreply.github.com>
Co-authored-by: Tom Moor <tom@getoutline.com>
---
 shared/editor/components/Styles.ts | 6 ++++--
 shared/editor/lib/code.test.ts     | 2 ++
 shared/editor/lib/code.ts          | 5 +++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts
index 05da422e83..8d1fe57f95 100644
--- a/shared/editor/components/Styles.ts
+++ b/shared/editor/components/Styles.ts
@@ -247,11 +247,13 @@ const codeBlockStyle = (props: Props) => css`
   }
 
   .token.deleted {
-    text-decoration: line-through;
+    color: ${props.theme.textDiffDeleted};
+    background-color: ${props.theme.textDiffDeletedBackground};
   }
 
   .token.inserted {
-    border-bottom: 1px dotted ${props.theme.codeInserted};
+    color: ${props.theme.textDiffInserted};
+    background-color: ${props.theme.textDiffInsertedBackground};
     text-decoration: none;
   }
 
diff --git a/shared/editor/lib/code.test.ts b/shared/editor/lib/code.test.ts
index ee16961e49..24bb86defe 100644
--- a/shared/editor/lib/code.test.ts
+++ b/shared/editor/lib/code.test.ts
@@ -6,6 +6,7 @@ describe("getRefractorLangForLanguage", () => {
     expect(getRefractorLangForLanguage("mermaid")).toBe("mermaid");
     expect(getRefractorLangForLanguage("mermaidjs")).toBe("mermaid");
     expect(getRefractorLangForLanguage("xml")).toBe("markup");
+    expect(getRefractorLangForLanguage("diff")).toBe("diff");
     expect(getRefractorLangForLanguage("unknown")).toBeUndefined();
     expect(getRefractorLangForLanguage("")).toBeUndefined();
   });
@@ -17,6 +18,7 @@ describe("getLabelForLanguage", () => {
     expect(getLabelForLanguage("mermaid")).toBe("Mermaid");
     expect(getLabelForLanguage("mermaidjs")).toBe("Mermaid");
     expect(getLabelForLanguage("xml")).toBe("XML");
+    expect(getLabelForLanguage("diff")).toBe("Diff");
     expect(getLabelForLanguage("unknown")).toBe("Plain text");
     expect(getLabelForLanguage("none")).toBe("Plain text");
     expect(getLabelForLanguage("")).toBe("Plain text");
diff --git a/shared/editor/lib/code.ts b/shared/editor/lib/code.ts
index bbe4eaf5a3..bbc900add9 100644
--- a/shared/editor/lib/code.ts
+++ b/shared/editor/lib/code.ts
@@ -56,6 +56,11 @@ export const codeLanguages: Record<string, CodeLanguage> = {
     label: "Dart",
     loader: () => import("refractor/lang/dart").then((m) => m.default),
   },
+  diff: {
+    lang: "diff",
+    label: "Diff",
+    loader: () => import("refractor/lang/diff").then((m) => m.default),
+  },
   docker: {
     lang: "docker",
     label: "Docker",