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",