diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index db5516b7b933160c2f46e7e80e12e928f60f31a9..4c100ec7335aebba4584be844576dade206e1d52 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -51,6 +51,7 @@ export default {
       'scrollToDraft',
       'toggleResolveDiscussion',
     ]),
+    ...mapActions(['setSelectedCommentPositionHover']),
     update(data) {
       this.updateDraft(data);
     },
@@ -67,7 +68,11 @@ export default {
 };
 </script>
 <template>
-  <article class="draft-note-component note-wrapper">
+  <article
+    class="draft-note-component note-wrapper"
+    @mouseenter="setSelectedCommentPositionHover(draft.position.line_range)"
+    @mouseleave="setSelectedCommentPositionHover()"
+  >
     <ul class="notes draft-notes">
       <noteable-note
         :note="draft"
diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index 9558bfb04c6fed083691fc6458089d10b5fd7a4e..d2f49bd002061f7711ec108ddf729097201bde16 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -148,10 +148,7 @@ export default {
 
 <template>
   <div class="content discussion-form discussion-form-container discussion-notes">
-    <div
-      v-if="glFeatures.multilineComments"
-      class="gl-mb-3 gl-text-gray-700 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-pb-3"
-    >
+    <div v-if="glFeatures.multilineComments" class="gl-mb-3 gl-text-gray-700 gl-pb-3">
       <multiline-comment-form
         v-model="commentLineStart"
         :line="line"
diff --git a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
index 4e228577666f287b9110a880ac66ac0a6c01db0b..168e8c6c14e30b5f957c42e49cbcb4a0e8f211c0 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
@@ -37,6 +37,11 @@ export default {
       required: false,
       default: false,
     },
+    isCommented: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -47,7 +52,10 @@ export default {
     ...mapGetters('diffs', ['fileLineCoverage']),
     ...mapState({
       isHighlighted(state) {
-        return this.line.line_code !== null && this.line.line_code === state.diffs.highlightedRow;
+        if (this.isCommented) return true;
+
+        const lineCode = this.line.line_code;
+        return lineCode ? lineCode === state.diffs.highlightedRow : false;
       },
     }),
     isContextLine() {
diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index babf48f41f35632e4cbeea018fcd4847a5149105..e82d06ee385995df1ddb22c73dad0462cf841d41 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -1,10 +1,11 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import InlineDraftCommentRow from '~/batch_comments/components/inline_draft_comment_row.vue';
 import inlineDiffTableRow from './inline_diff_table_row.vue';
 import inlineDiffCommentRow from './inline_diff_comment_row.vue';
 import inlineDiffExpansionRow from './inline_diff_expansion_row.vue';
+import { getCommentedLines } from '~/notes/components/multiline_comment_utils';
 
 export default {
   components: {
@@ -31,9 +32,19 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
+    ...mapState({
+      selectedCommentPosition: ({ notes }) => notes.selectedCommentPosition,
+      selectedCommentPositionHover: ({ notes }) => notes.selectedCommentPositionHover,
+    }),
     diffLinesLength() {
       return this.diffLines.length;
     },
+    commentedLines() {
+      return getCommentedLines(
+        this.selectedCommentPosition || this.selectedCommentPositionHover,
+        this.diffLines,
+      );
+    },
   },
   userColorScheme: window.gon.user_color_scheme,
 };
@@ -67,6 +78,7 @@ export default {
           :file-path="diffFile.file_path"
           :line="line"
           :is-bottom="index + 1 === diffLinesLength"
+          :is-commented="index >= commentedLines.startLine && index <= commentedLines.endLine"
         />
         <inline-diff-comment-row
           :key="`icr-${line.line_code || index}`"
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
index c2553dc87a6b3500cfc560478e9554a509ec18e0..ccb32a2a745536e702bcc8d4e55d824b2fb94b8c 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
@@ -40,6 +40,11 @@ export default {
       required: false,
       default: false,
     },
+    isCommented: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -51,6 +56,8 @@ export default {
     ...mapGetters('diffs', ['fileLineCoverage']),
     ...mapState({
       isHighlighted(state) {
+        if (this.isCommented) return true;
+
         const lineCode =
           (this.line.left && this.line.left.line_code) ||
           (this.line.right && this.line.right.line_code);
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index 502c458bf2e1b7d6cd865cace815551c5d42af71..46a691ad22db51dd7270dc7329ba8b4c0b2c98e7 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -1,10 +1,11 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import ParallelDraftCommentRow from '~/batch_comments/components/parallel_draft_comment_row.vue';
 import parallelDiffTableRow from './parallel_diff_table_row.vue';
 import parallelDiffCommentRow from './parallel_diff_comment_row.vue';
 import parallelDiffExpansionRow from './parallel_diff_expansion_row.vue';
+import { getCommentedLines } from '~/notes/components/multiline_comment_utils';
 
 export default {
   components: {
@@ -31,9 +32,19 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId']),
+    ...mapState({
+      selectedCommentPosition: ({ notes }) => notes.selectedCommentPosition,
+      selectedCommentPositionHover: ({ notes }) => notes.selectedCommentPositionHover,
+    }),
     diffLinesLength() {
       return this.diffLines.length;
     },
+    commentedLines() {
+      return getCommentedLines(
+        this.selectedCommentPosition || this.selectedCommentPositionHover,
+        this.diffLines,
+      );
+    },
   },
   userColorScheme: window.gon.user_color_scheme,
 };
@@ -69,6 +80,7 @@ export default {
           :file-path="diffFile.file_path"
           :line="line"
           :is-bottom="index + 1 === diffLinesLength"
+          :is-commented="index >= commentedLines.startLine && index <= commentedLines.endLine"
         />
         <parallel-diff-comment-row
           :key="`dcr-${line.line_code || index}`"
diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index b5e5daa88093cfa4b8c96d6bcbadcd4438db744a..458da5cf67f2b8ee2d2548058e76042d78b398f2 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -74,7 +74,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['toggleDiscussion']),
+    ...mapActions(['toggleDiscussion', 'setSelectedCommentPositionHover']),
     componentName(note) {
       if (note.isPlaceholderNote) {
         if (note.placeholderType === SYSTEM_NOTE) {
@@ -99,7 +99,11 @@ export default {
 
 <template>
   <div class="discussion-notes">
-    <ul class="notes">
+    <ul
+      class="notes"
+      @mouseenter="setSelectedCommentPositionHover(discussion.position.line_range)"
+      @mouseleave="setSelectedCommentPositionHover()"
+    >
       <template v-if="shouldGroupReplies">
         <component
           :is="componentName(firstNote)"
diff --git a/app/assets/javascripts/notes/components/multiline_comment_form.vue b/app/assets/javascripts/notes/components/multiline_comment_form.vue
index 6aa9a9aa450974efc67109d028096d8fc5f57005..bb13eb87af729b5d8c4cd196432872b00f7d7c9b 100644
--- a/app/assets/javascripts/notes/components/multiline_comment_form.vue
+++ b/app/assets/javascripts/notes/components/multiline_comment_form.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapActions } from 'vuex';
 import { GlFormSelect, GlSprintf } from '@gitlab/ui';
 import { getSymbol, getLineClasses } from './multiline_comment_utils';
 
@@ -39,8 +40,13 @@ export default {
       old_line: line.old_line,
       new_line: line.new_line,
     };
+    this.highlightSelection();
+  },
+  destroyed() {
+    this.setSelectedCommentPosition();
   },
   methods: {
+    ...mapActions(['setSelectedCommentPosition']),
     getSymbol({ type }) {
       return getSymbol(type);
     },
@@ -50,6 +56,16 @@ export default {
     updateCommentLineStart(value) {
       this.commentLineStart = value;
       this.$emit('input', value);
+      this.highlightSelection();
+    },
+    highlightSelection() {
+      const { line_code, new_line, old_line, type } = this.line;
+      const updatedLineRange = {
+        start: { ...this.commentLineStart },
+        end: { line_code, new_line, old_line, type },
+      };
+
+      this.setSelectedCommentPosition(updatedLineRange);
     },
   },
 };
diff --git a/app/assets/javascripts/notes/components/multiline_comment_utils.js b/app/assets/javascripts/notes/components/multiline_comment_utils.js
index e8a834df7138c1599c9b0eaf423c151110851c72..dbae10c8f6c4265cb2b61443e8c62b93ee95cf14 100644
--- a/app/assets/javascripts/notes/components/multiline_comment_utils.js
+++ b/app/assets/javascripts/notes/components/multiline_comment_utils.js
@@ -90,3 +90,22 @@ export function formatLineRange(start, end) {
     end: extractProps(end),
   };
 }
+
+export function getCommentedLines(selectedCommentPosition, diffLines) {
+  if (!selectedCommentPosition) {
+    // This structure simplifies the logic that consumes this result
+    // by keeping the returned shape the same and adjusting the bounds
+    // to something unreachable. This way our component logic stays:
+    // "if index between start and end"
+    return {
+      startLine: diffLines.length + 1,
+      endLine: diffLines.length + 1,
+    };
+  }
+
+  const { start, end } = selectedCommentPosition;
+  const startLine = diffLines.findIndex(l => l.line_code === start.line_code);
+  const endLine = diffLines.findIndex(l => l.line_code === end.line_code);
+
+  return { startLine, endLine };
+}
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 45cf7888aff739f4d45d1d102fe58a89be06b491..56d8259757352f95b29cf6d6d3400dd05a24105c 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -186,6 +186,7 @@ export default {
     eventHub.$on('enterEditMode', ({ noteId }) => {
       if (noteId === this.note.id) {
         this.isEditing = true;
+        this.setSelectedCommentPositionHover();
         this.scrollToNoteIfNeeded($(this.$el));
       }
     });
@@ -205,9 +206,11 @@ export default {
       'toggleResolveNote',
       'scrollToNoteIfNeeded',
       'updateAssignees',
+      'setSelectedCommentPositionHover',
     ]),
     editHandler() {
       this.isEditing = true;
+      this.setSelectedCommentPositionHover();
       this.$emit('handleEdit');
     },
     deleteHandler() {
@@ -284,6 +287,7 @@ export default {
           } else {
             this.isRequesting = false;
             this.isEditing = true;
+            this.setSelectedCommentPositionHover();
             this.$nextTick(() => {
               const msg = __('Something went wrong while editing your comment. Please try again.');
               Flash(msg, 'alert', this.$el);
@@ -340,7 +344,7 @@ export default {
         :line="line"
         :comment-line-options="commentLineOptions"
         :line-range="note.position.line_range"
-        class="gl-mb-3 gl-text-gray-700 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-pb-3"
+        class="gl-mb-3 gl-text-gray-700 gl-pb-3"
       />
       <div
         v-else
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 8a7734f4d310e43d027c365bd80a5835920e1b9d..5b2ab25555749f4e9348b008358a804b21b9004e 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -99,6 +99,14 @@ export const setDiscussionSortDirection = ({ commit }, direction) => {
   commit(types.SET_DISCUSSIONS_SORT, direction);
 };
 
+export const setSelectedCommentPosition = ({ commit }, position) => {
+  commit(types.SET_SELECTED_COMMENT_POSITION, position);
+};
+
+export const setSelectedCommentPositionHover = ({ commit }, position) => {
+  commit(types.SET_SELECTED_COMMENT_POSITION_HOVER, position);
+};
+
 export const removeNote = ({ commit, dispatch, state }, note) => {
   const discussion = state.discussions.find(({ id }) => id === note.discussion_id);
 
diff --git a/app/assets/javascripts/notes/stores/modules/index.js b/app/assets/javascripts/notes/stores/modules/index.js
index c71e62cb551fff66ac173673a60df0ea50ea7b80..1649e63c61f2b2372f440cbf99f69e0ab2becf49 100644
--- a/app/assets/javascripts/notes/stores/modules/index.js
+++ b/app/assets/javascripts/notes/stores/modules/index.js
@@ -12,6 +12,15 @@ export default () => ({
     lastFetchedAt: null,
     currentDiscussionId: null,
     batchSuggestionsInfo: [],
+    /**
+     * selectedCommentPosition & selectedCommentPosition structures are the same as `position.line_range`:
+     * {
+     *  start: { line_code: string, new_line: number, old_line:number, type: string },
+     *  end: { line_code: string, new_line: number, old_line:number, type: string },
+     * }
+     */
+    selectedCommentPosition: null,
+    selectedCommentPositionHover: null,
 
     // View layer
     isToggleStateButtonLoading: false,
diff --git a/app/assets/javascripts/notes/stores/mutation_types.js b/app/assets/javascripts/notes/stores/mutation_types.js
index efb24479f7c0bf53ec57c3550c2071adc5a6535d..f2236b18bebcbb31ae7e39aa5e9378a4c8a4340b 100644
--- a/app/assets/javascripts/notes/stores/mutation_types.js
+++ b/app/assets/javascripts/notes/stores/mutation_types.js
@@ -33,6 +33,8 @@ export const SET_EXPAND_DISCUSSIONS = 'SET_EXPAND_DISCUSSIONS';
 export const UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS = 'UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS';
 export const SET_CURRENT_DISCUSSION_ID = 'SET_CURRENT_DISCUSSION_ID';
 export const SET_DISCUSSIONS_SORT = 'SET_DISCUSSIONS_SORT';
+export const SET_SELECTED_COMMENT_POSITION = 'SET_SELECTED_COMMENT_POSITION';
+export const SET_SELECTED_COMMENT_POSITION_HOVER = 'SET_SELECTED_COMMENT_POSITION_HOVER';
 
 // Issue
 export const CLOSE_ISSUE = 'CLOSE_ISSUE';
diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index 7ed0dd84b655f4e43ae779abb242ea260a8f0b9d..e5f1c11fb35bee268e84f1507739754b83f16f29 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -308,6 +308,14 @@ export default {
     state.discussionSortOrder = sort;
   },
 
+  [types.SET_SELECTED_COMMENT_POSITION](state, position) {
+    state.selectedCommentPosition = position;
+  },
+
+  [types.SET_SELECTED_COMMENT_POSITION_HOVER](state, position) {
+    state.selectedCommentPositionHover = position;
+  },
+
   [types.DISABLE_COMMENTS](state, value) {
     state.commentsDisabled = value;
   },
diff --git a/changelogs/unreleased/jdb-highlight-commented-rows.yml b/changelogs/unreleased/jdb-highlight-commented-rows.yml
new file mode 100644
index 0000000000000000000000000000000000000000..a4aa76ca6848e89c9b279211a570bc04894d0367
--- /dev/null
+++ b/changelogs/unreleased/jdb-highlight-commented-rows.yml
@@ -0,0 +1,5 @@
+---
+title: Highlight commented rows
+merge_request: 34432
+author:
+type: added
diff --git a/spec/frontend/diffs/components/inline_diff_table_row_spec.js b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
index 66349727b110eebd696ad3480566ea66bd77fc56..f929f97b59831d50060ae79fee0bdeb7b2c9de4f 100644
--- a/spec/frontend/diffs/components/inline_diff_table_row_spec.js
+++ b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
@@ -1,27 +1,31 @@
-import Vue from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
 import { createStore } from '~/mr_notes/stores';
 import InlineDiffTableRow from '~/diffs/components/inline_diff_table_row.vue';
 import diffFileMockData from '../mock_data/diff_file';
 
 describe('InlineDiffTableRow', () => {
+  let wrapper;
   let vm;
   const thisLine = diffFileMockData.highlighted_diff_lines[0];
 
   beforeEach(() => {
-    vm = createComponentWithStore(Vue.extend(InlineDiffTableRow), createStore(), {
-      line: thisLine,
-      fileHash: diffFileMockData.file_hash,
-      filePath: diffFileMockData.file_path,
-      contextLinesPath: 'contextLinesPath',
-      isHighlighted: false,
-    }).$mount();
+    wrapper = shallowMount(InlineDiffTableRow, {
+      store: createStore(),
+      propsData: {
+        line: thisLine,
+        fileHash: diffFileMockData.file_hash,
+        filePath: diffFileMockData.file_path,
+        contextLinesPath: 'contextLinesPath',
+        isHighlighted: false,
+      },
+    });
+    vm = wrapper.vm;
   });
 
   it('does not add hll class to line content when line does not match highlighted row', done => {
     vm.$nextTick()
       .then(() => {
-        expect(vm.$el.querySelector('.line_content').classList).not.toContain('hll');
+        expect(wrapper.find('.line_content').classes('hll')).toBe(false);
       })
       .then(done)
       .catch(done.fail);
@@ -35,12 +39,19 @@ describe('InlineDiffTableRow', () => {
         return vm.$nextTick();
       })
       .then(() => {
-        expect(vm.$el.querySelector('.line_content').classList).toContain('hll');
+        expect(wrapper.find('.line_content').classes('hll')).toBe(true);
       })
       .then(done)
       .catch(done.fail);
   });
 
+  it('adds hll class to lineContent when line is part of a multiline comment', () => {
+    wrapper.setProps({ isCommented: true });
+    return vm.$nextTick().then(() => {
+      expect(wrapper.find('.line_content').classes('hll')).toBe(true);
+    });
+  });
+
   describe('sets coverage title and class', () => {
     it('for lines with coverage', done => {
       vm.$nextTick()
@@ -53,10 +64,10 @@ describe('InlineDiffTableRow', () => {
           return vm.$nextTick();
         })
         .then(() => {
-          const coverage = vm.$el.querySelector('.line-coverage');
+          const coverage = wrapper.find('.line-coverage');
 
-          expect(coverage.title).toContain('Test coverage: 5 hits');
-          expect(coverage.classList).toContain('coverage');
+          expect(coverage.attributes('title')).toContain('Test coverage: 5 hits');
+          expect(coverage.classes('coverage')).toBe(true);
         })
         .then(done)
         .catch(done.fail);
@@ -73,10 +84,10 @@ describe('InlineDiffTableRow', () => {
           return vm.$nextTick();
         })
         .then(() => {
-          const coverage = vm.$el.querySelector('.line-coverage');
+          const coverage = wrapper.find('.line-coverage');
 
-          expect(coverage.title).toContain('No test coverage');
-          expect(coverage.classList).toContain('no-coverage');
+          expect(coverage.attributes('title')).toContain('No test coverage');
+          expect(coverage.classes('no-coverage')).toBe(true);
         })
         .then(done)
         .catch(done.fail);
@@ -90,11 +101,11 @@ describe('InlineDiffTableRow', () => {
           return vm.$nextTick();
         })
         .then(() => {
-          const coverage = vm.$el.querySelector('.line-coverage');
+          const coverage = wrapper.find('.line-coverage');
 
-          expect(coverage.title).not.toContain('Coverage');
-          expect(coverage.classList).not.toContain('coverage');
-          expect(coverage.classList).not.toContain('no-coverage');
+          expect(coverage.attributes('title')).toBeUndefined();
+          expect(coverage.classes('coverage')).toBe(false);
+          expect(coverage.classes('no-coverage')).toBe(false);
         })
         .then(done)
         .catch(done.fail);
diff --git a/spec/frontend/diffs/components/parallel_diff_table_row_spec.js b/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
index 6b92d448cf58bf193cda1b66638b4a0631c3c58e..339352943a994f3631e8f5d00a368dfb756c8a52 100644
--- a/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
+++ b/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/mr_notes/stores';
 import ParallelDiffTableRow from '~/diffs/components/parallel_diff_table_row.vue';
@@ -6,18 +7,24 @@ import diffFileMockData from '../mock_data/diff_file';
 
 describe('ParallelDiffTableRow', () => {
   describe('when one side is empty', () => {
+    let wrapper;
     let vm;
     const thisLine = diffFileMockData.parallel_diff_lines[0];
     const rightLine = diffFileMockData.parallel_diff_lines[0].right;
 
     beforeEach(() => {
-      vm = createComponentWithStore(Vue.extend(ParallelDiffTableRow), createStore(), {
-        line: thisLine,
-        fileHash: diffFileMockData.file_hash,
-        filePath: diffFileMockData.file_path,
-        contextLinesPath: 'contextLinesPath',
-        isHighlighted: false,
-      }).$mount();
+      wrapper = shallowMount(ParallelDiffTableRow, {
+        store: createStore(),
+        propsData: {
+          line: thisLine,
+          fileHash: diffFileMockData.file_hash,
+          filePath: diffFileMockData.file_path,
+          contextLinesPath: 'contextLinesPath',
+          isHighlighted: false,
+        },
+      });
+
+      vm = wrapper.vm;
     });
 
     it('does not highlight non empty line content when line does not match highlighted row', done => {
@@ -42,6 +49,13 @@ describe('ParallelDiffTableRow', () => {
         .then(done)
         .catch(done.fail);
     });
+
+    it('highlights nonempty line content when line is part of a multiline comment', () => {
+      wrapper.setProps({ isCommented: true });
+      return vm.$nextTick().then(() => {
+        expect(vm.$el.querySelector('.line_content.right-side').classList).toContain('hll');
+      });
+    });
   });
 
   describe('when both sides have content', () => {
diff --git a/spec/frontend/notes/components/multiline_comment_utils_spec.js b/spec/frontend/notes/components/multiline_comment_utils_spec.js
index 4afb8d976712a0dae1e34d91ca53e2773478fe06..af4394cc648aa0111eb141c3a7f87976ba59b5c6 100644
--- a/spec/frontend/notes/components/multiline_comment_utils_spec.js
+++ b/spec/frontend/notes/components/multiline_comment_utils_spec.js
@@ -2,6 +2,7 @@ import {
   getSymbol,
   getStartLineNumber,
   getEndLineNumber,
+  getCommentedLines,
 } from '~/notes/components/multiline_comment_utils';
 
 describe('Multiline comment utilities', () => {
@@ -33,4 +34,30 @@ describe('Multiline comment utilities', () => {
       expect(getSymbol(type)).toEqual(result);
     });
   });
+  describe('getCommentedLines', () => {
+    const diffLines = [{ line_code: '1' }, { line_code: '2' }, { line_code: '3' }];
+    it('returns a default object when `selectedCommentPosition` is not provided', () => {
+      expect(getCommentedLines(undefined, diffLines)).toEqual({ startLine: 4, endLine: 4 });
+    });
+    it('returns an object with startLine and endLine equal to 0', () => {
+      const selectedCommentPosition = {
+        start: { line_code: '1' },
+        end: { line_code: '1' },
+      };
+      expect(getCommentedLines(selectedCommentPosition, diffLines)).toEqual({
+        startLine: 0,
+        endLine: 0,
+      });
+    });
+    it('returns an object with startLine and endLine equal to 0 and 1', () => {
+      const selectedCommentPosition = {
+        start: { line_code: '1' },
+        end: { line_code: '2' },
+      };
+      expect(getCommentedLines(selectedCommentPosition, diffLines)).toEqual({
+        startLine: 0,
+        endLine: 1,
+      });
+    });
+  });
 });
diff --git a/spec/frontend/notes/components/noteable_note_spec.js b/spec/frontend/notes/components/noteable_note_spec.js
index 3cb6cfe9787c9379d41af1ba239d9fea391525ea..6393be4f0ae7c40807cea3c513ea690b8df072c5 100644
--- a/spec/frontend/notes/components/noteable_note_spec.js
+++ b/spec/frontend/notes/components/noteable_note_spec.js
@@ -175,6 +175,7 @@ describe('issue_note', () => {
     store.hotUpdate({
       actions: {
         updateNote() {},
+        setSelectedCommentPositionHover() {},
       },
     });
     const noteBodyComponent = wrapper.find(NoteBody);
diff --git a/spec/frontend/notes/stores/actions_spec.js b/spec/frontend/notes/stores/actions_spec.js
index a4d8927e89b9c356281bb35d78ea11dd9df70ba1..6a905527bdc717076035a437ae534764c691f0c2 100644
--- a/spec/frontend/notes/stores/actions_spec.js
+++ b/spec/frontend/notes/stores/actions_spec.js
@@ -1127,6 +1127,19 @@ describe('Actions Notes Store', () => {
     });
   });
 
+  describe('setSelectedCommentPosition', () => {
+    it('calls the correct mutation with the correct args', done => {
+      testAction(
+        actions.setSelectedCommentPosition,
+        {},
+        {},
+        [{ type: mutationTypes.SET_SELECTED_COMMENT_POSITION, payload: {} }],
+        [],
+        done,
+      );
+    });
+  });
+
   describe('softDeleteDescriptionVersion', () => {
     const endpoint = '/path/to/diff/1';
     const payload = {
diff --git a/spec/frontend/notes/stores/mutation_spec.js b/spec/frontend/notes/stores/mutation_spec.js
index 78cda0d038db5757276b7674fb7ac881c93fdc05..0ad18ba9b6addcc32e1f08f4870cf22a4264056a 100644
--- a/spec/frontend/notes/stores/mutation_spec.js
+++ b/spec/frontend/notes/stores/mutation_spec.js
@@ -524,6 +524,26 @@ describe('Notes Store mutations', () => {
     });
   });
 
+  describe('SET_SELECTED_COMMENT_POSITION', () => {
+    it('should set comment position state', () => {
+      const state = {};
+
+      mutations.SET_SELECTED_COMMENT_POSITION(state, {});
+
+      expect(state.selectedCommentPosition).toEqual({});
+    });
+  });
+
+  describe('SET_SELECTED_COMMENT_POSITION_HOVER', () => {
+    it('should set comment hover position state', () => {
+      const state = {};
+
+      mutations.SET_SELECTED_COMMENT_POSITION_HOVER(state, {});
+
+      expect(state.selectedCommentPositionHover).toEqual({});
+    });
+  });
+
   describe('DISABLE_COMMENTS', () => {
     it('should set comments disabled state', () => {
       const state = {};