diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
index f98560f7336..b9f884074d0 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
@@ -50,7 +50,7 @@ export default {
       :help-page-path="helpPagePath"
       @apply="applySuggestion"
     />
-    <table class="mb-3 md-suggestion-diff">
+    <table class="mb-3 md-suggestion-diff js-syntax-highlight code">
       <tbody>
         <!-- Old Line -->
         <tr class="line_holder old">
diff --git a/changelogs/unreleased/55945-suggested-change-highlight.yml b/changelogs/unreleased/55945-suggested-change-highlight.yml
new file mode 100644
index 00000000000..611854d36ab
--- /dev/null
+++ b/changelogs/unreleased/55945-suggested-change-highlight.yml
@@ -0,0 +1,5 @@
+---
+title: Add syntax highlighting to suggestion diff
+merge_request: 24156
+author:
+type: fixed
diff --git a/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js b/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js
index d4ed8f2f7a4..f87c2a92f47 100644
--- a/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js
@@ -34,8 +34,8 @@ describe('Suggestion Diff component', () => {
       expect(vm.$el.querySelector('.qa-suggestion-diff-header')).not.toBeNull();
     });
 
-    it('renders a diff table', () => {
-      expect(vm.$el.querySelector('table.md-suggestion-diff')).not.toBeNull();
+    it('renders a diff table with syntax highlighting', () => {
+      expect(vm.$el.querySelector('.md-suggestion-diff.js-syntax-highlight.code')).not.toBeNull();
     });
 
     it('renders the oldLineNumber', () => {