Add syntax highlighting to suggestion preview

app/assets/javascripts/diffs/components/diff_line_note_form.vue

@@ -28,6 +28,11 @@ export default {
       type: Object,
       required: true,
     },
+    helpPagePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     ...mapState({
@@ -95,6 +100,7 @@ export default {
       :is-editing="true"
       :line-code="line.line_code"
       :line="line"
+      :help-page-path="helpPagePath"
       save-button-title="Comment"
       class="diff-comment-form"
       @cancelForm="handleCancelCommentForm"

app/assets/javascripts/diffs/components/inline_diff_comment_row.vue

@@ -54,6 +54,7 @@ export default {
           :diff-file-hash="diffFileHash"
           :line="line"
           :note-target-line="line"
+          :help-page-path="helpPagePath"
         />
       </div>
     </td>

app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue

@@ -101,6 +101,7 @@ export default {
         :diff-file-hash="diffFileHash"
         :line="line.left"
         :note-target-line="line.left"
+        :help-page-path="helpPagePath"
         line-position="left"
       />
     </td>

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -182,9 +182,9 @@ export default {
         this.hasSuggestion = data.references.suggestions && data.references.suggestions.length;
       }
 
-      this.$nextTick(() => {
-        $(this.$refs['markdown-preview']).renderGFM();
-      });
+      this.$nextTick()
+        .then(() => $(this.$refs['markdown-preview']).renderGFM())
+        .catch(() => new Flash(__('Error rendering markdown preview')));
     },
 
     versionedPreviewPath() {

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue

@@ -42,7 +42,7 @@ export default {
   <div class="md-suggestion-header border-bottom-0 mt-2">
     <div class="qa-suggestion-diff-header font-weight-bold">
       {{ __('Suggested change') }}
-      <a v-if="helpPagePath" :href="helpPagePath" :aria-label="__('Help')">
+      <a v-if="helpPagePath" :href="helpPagePath" :aria-label="__('Help')" class="js-help-btn">
         <icon name="question-o" css-classes="link-highlight" />
       </a>
     </div>

app/assets/stylesheets/framework/markdown_area.scss

@@ -158,7 +158,7 @@
     max-height: calc(100vh - 100px);
   }
 
-  table {
+  table:not(.js-syntax-highlight) {
     @include markdown-table;
   }
 }

app/assets/stylesheets/framework/typography.scss

@@ -143,7 +143,7 @@
     margin: 0 0 16px;
   }
 
-  table {
+  table:not(.js-syntax-highlight) {
     @extend .table;
     @extend .table-bordered;
     margin: 16px 0;

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

+---
+title: Fix syntax highlighting for suggested changes preview
+merge_request: 24358
+author:
+type: fixed

locale/gitlab.pot

@@ -2956,6 +2956,9 @@ msgstr ""
 msgid "Error occurred when toggling the notification subscription"
 msgstr ""
 
+msgid "Error rendering markdown preview"
+msgstr ""
+
 msgid "Error saving label update."
 msgstr ""
 

spec/javascripts/vue_shared/components/markdown/suggestion_diff_header_spec.js

@@ -31,6 +31,12 @@ describe('Suggestion Diff component', () => {
       expect(header.innerHTML.includes('Suggested change')).toBe(true);
     });
 
+    it('renders a help button', () => {
+      const helpBtn = vm.$el.querySelector('.js-help-btn');
+
+      expect(helpBtn).not.toBeNull();
+    });
+
     it('renders an apply button', () => {
       const applyBtn = vm.$el.querySelector('.qa-apply-btn');