Add syntax highlighting to suggestion diff

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

changelogs/unreleased/55945-suggested-change-highlight.yml

+---
+title: Add syntax highlighting to suggestion diff
+merge_request: 24156
+author:
+type: fixed

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', () => {