Escape characters in diff view function definitions

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

 <script>
+import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { IdState } from 'vendor/vue-virtual-scroller';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
@@ -19,6 +20,9 @@ export default {
     DiffCommentCell,
     DraftNote,
   },
+  directives: {
+    SafeHtml,
+  },
   mixins: [
     draftCommentsMixin,
     glFeatureFlagsMixin(),
@@ -173,15 +177,17 @@ export default {
           <div class="diff-grid-left diff-grid-3-col left-side">
             <div class="diff-td diff-line-num"></div>
             <div v-if="inline" class="diff-td diff-line-num"></div>
-            <div class="diff-td line_content left-side gl-white-space-normal!">
-              {{ line.left.rich_text }}
-            </div>
+            <div
+              v-safe-html="line.left.rich_text"
+              class="diff-td line_content left-side gl-white-space-normal!"
+            ></div>
           </div>
           <div v-if="!inline" class="diff-grid-right diff-grid-3-col right-side">
             <div class="diff-td diff-line-num"></div>
-            <div class="diff-td line_content right-side gl-white-space-normal!">
-              {{ line.left.rich_text }}
-            </div>
+            <div
+              v-safe-html="line.left.rich_text"
+              class="diff-td line_content right-side gl-white-space-normal!"
+            ></div>
           </div>
         </div>
       </template>

spec/frontend/diffs/components/diff_view_spec.js

@@ -51,10 +51,18 @@ describe('DiffView', () => {
 
   it('renders a match line', () => {
     const wrapper = createWrapper({
-      diffLines: [{ isMatchLineLeft: true, left: { rich_text: 'matched text', lineDraft: {} } }],
+      diffLines: [
+        {
+          isMatchLineLeft: true,
+          left: {
+            rich_text: '@@ -4,12 +4,12 @@ import createFlash from '~/flash';',
+            lineDraft: {},
+          },
+        },
+      ],
     });
     expect(wrapper.find(DiffExpansionCell).exists()).toBe(true);
-    expect(wrapper.text()).toContain('matched text');
+    expect(wrapper.text()).toContain("@@ -4,12 +4,12 @@ import createFlash from '~/flash';");
   });
 
   it.each`