diff --git a/app/components/RenderMarkdown.tsx b/app/components/RenderMarkdown.tsx
index bb698aff..62f64705 100644
--- a/app/components/RenderMarkdown.tsx
+++ b/app/components/RenderMarkdown.tsx
@@ -4,6 +4,7 @@ import { MarkdownLink } from '~/components/MarkdownLink'
 import type { HTMLProps } from 'react'
 import Markdown from 'markdown-to-jsx'
 import { getHighlighter as shikiGetHighlighter } from 'shiki/bundle-web.mjs'
+import { transformerNotationDiff } from '@shikijs/transformers'
 
 const CustomHeading = ({
   Comp,
@@ -86,6 +87,7 @@ function CodeBlock(props: React.HTMLProps<HTMLPreElement>) {
           highlighter.codeToHtml(code, {
             lang,
             theme,
+            transformers: [transformerNotationDiff()],
           })
         )
       )
diff --git a/app/styles/app.css b/app/styles/app.css
index 874c9d98..9abd2616 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -174,6 +174,13 @@ pre.shiki .language-id {
   display: none;
 }
 
+pre.has-diff span.remove {
+  background-color: #ff000036;
+}
+
+pre.has-diff span.add {
+  background-color: #00ff0036;
+}
 /* Visually differentiates twoslash code samples  */
 pre.twoslash {
   border-color: #719af4;
diff --git a/package.json b/package.json
index 3ec392ee..5b821bdb 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
   },
   "devDependencies": {
     "@orama/orama": "^2.0.16",
+    "@shikijs/transformers": "^1.3.0",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
     "@types/remove-markdown": "^0.3.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5320a0d3..49e7a087 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -139,6 +139,9 @@ devDependencies:
   '@orama/orama':
     specifier: ^2.0.16
     version: 2.0.16
+  '@shikijs/transformers':
+    specifier: ^1.3.0
+    version: 1.3.0
   '@types/react':
     specifier: ^18.2.65
     version: 18.2.65
@@ -4179,7 +4182,12 @@ packages:
 
   /@shikijs/core@1.3.0:
     resolution: {integrity: sha512-7fedsBfuILDTBmrYZNFI8B6ATTxhQAasUHllHmjvSZPnoq4bULWoTpHwmuQvZ8Aq03/tAa2IGo6RXqWtHdWaCA==}
-    dev: false
+
+  /@shikijs/transformers@1.3.0:
+    resolution: {integrity: sha512-3mlpg2I9CjhjE96dEWQOGeCWoPcyTov3s4aAsHmgvnTHa8MBknEnCQy8/xivJPSpD+olqOqIEoHnLfbNJK29AA==}
+    dependencies:
+      shiki: 1.3.0
+    dev: true
 
   /@sindresorhus/merge-streams@2.3.0:
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
@@ -10684,7 +10692,6 @@ packages:
     resolution: {integrity: sha512-9aNdQy/etMXctnPzsje1h1XIGm9YfRcSksKOGqZWXA/qP9G18/8fpz5Bjpma8bOgz3tqIpjERAd6/lLjFyzoww==}
     dependencies:
       '@shikijs/core': 1.3.0
-    dev: false
 
   /side-channel@1.0.4:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}