diff --git a/src/styles/core/_syntax.scss b/src/styles/core/_syntax.scss
index 08d1d5320..0c6764101 100644
--- a/src/styles/core/_syntax.scss
+++ b/src/styles/core/_syntax.scss
@@ -10,10 +10,16 @@
 
 // Map each color to the list of syntax highlighter tokens that use it
 $syntax-tokens-for-color: (
+  addition: (
+    addition,
+  ),
   comments: (
     comment,
     quote
   ),
+  deletion: (
+    deletion,
+  ),
   keywords: (
     keyword,
     literal,
diff --git a/src/styles/core/colors/_light.scss b/src/styles/core/colors/_light.scss
index 0295210d1..788a73dcc 100644
--- a/src/styles/core/colors/_light.scss
+++ b/src/styles/core/colors/_light.scss
@@ -142,9 +142,11 @@
   --color-step-focused: var(--color-figure-light-gray);
   --color-step-text: var(--color-figure-gray-secondary);
   --color-svg-icon: #{light-color(figure-gray-secondary)};
+  --color-syntax-addition: var(--color-figure-green);
   --color-syntax-attributes: rgb(148, 113, 0);
   --color-syntax-characters: rgb(39, 42, 216);
   --color-syntax-comments: rgb(112, 127, 140);
+  --color-syntax-deletion: var(--color-figure-red);
   --color-syntax-documentation-markup: rgb(80, 99, 117);
   --color-syntax-documentation-markup-keywords: rgb(80, 99, 117);
   --color-syntax-heading: rgb(186, 45, 162);