diff --git a/app/assets/javascripts/highlight_js/index.js b/app/assets/javascripts/highlight_js/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..aa66c721b9ab69cfde8ef632f27b0312df86bd9c
--- /dev/null
+++ b/app/assets/javascripts/highlight_js/index.js
@@ -0,0 +1,55 @@
+import hljsCore from 'highlight.js/lib/core';
+import languageLoader from '~/content_editor/services/highlight_js_language_loader';
+import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants';
+import { registerPlugins } from './plugins/index';
+
+const loadLanguage = async (language, hljs) => {
+  const languageDefinition = await languageLoader[language]();
+  hljs.registerLanguage(language, languageDefinition.default);
+};
+
+const loadSubLanguages = async (languageDefinition, hljs) => {
+  // Some files can contain sub-languages (i.e., Svelte); this ensures that sub-languages are also loaded
+  if (!languageDefinition?.contains) return;
+
+  // generate list of languages to load
+  const languages = new Set(
+    languageDefinition.contains
+      .filter((component) => Boolean(component.subLanguage))
+      .map((component) => component.subLanguage),
+  );
+
+  if (languageDefinition.subLanguage) {
+    languages.add(languageDefinition.subLanguage);
+  }
+
+  await Promise.all([...languages].map((language) => loadLanguage(language, hljs)));
+};
+
+const registerLanguage = async (hljs, language) => {
+  await loadLanguage(language, hljs);
+  await loadSubLanguages(hljs.getLanguage(language), hljs);
+};
+
+const initHighlightJs = async (language, plugins) => {
+  const hljs = hljsCore.newInstance();
+
+  registerPlugins(hljs, plugins);
+  await registerLanguage(hljs, language);
+
+  return hljs;
+};
+
+const highlightContent = async (lang, rawContent, plugins) => {
+  const language = ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()];
+  let highlightedContent;
+
+  if (language) {
+    const hljs = await initHighlightJs(language, plugins);
+    highlightedContent = hljs.highlight(rawContent, { language }).value;
+  }
+
+  return highlightedContent;
+};
+
+export { highlightContent };
diff --git a/app/assets/javascripts/highlight_js/plugins/index.js b/app/assets/javascripts/highlight_js/plugins/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..43309611e8d5c1300d1469f89fdac4e66c6895e4
--- /dev/null
+++ b/app/assets/javascripts/highlight_js/plugins/index.js
@@ -0,0 +1,29 @@
+import wrapChildNodes from '~/vue_shared/components/source_viewer/plugins/wrap_child_nodes';
+import wrapBidiChars from '~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars';
+import linkDependencies from '~/vue_shared/components/source_viewer/plugins/link_dependencies';
+import wrapLines from '~/vue_shared/components/source_viewer/plugins/wrap_lines';
+
+const HLJS_ON_AFTER_HIGHLIGHT = 'after:highlight';
+
+// Registers our plugins for Highlight.js
+// Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
+export const highlightPlugins = (fileType, rawContent, shouldWrapLines) => {
+  const plugins = [
+    wrapChildNodes,
+    wrapBidiChars,
+    (result) => linkDependencies(result, fileType, rawContent),
+  ];
+  if (shouldWrapLines) {
+    plugins.push(wrapLines);
+  }
+  return plugins;
+};
+
+export const registerPlugins = (hljs, plugins) => {
+  if (!plugins) {
+    return;
+  }
+  for (const plugin of plugins) {
+    hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: plugin });
+  }
+};
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js
deleted file mode 100644
index 3f8a9258fc3304185d9e7cab6a4070b51fc8a257..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import wrapChildNodes from './wrap_child_nodes';
-import linkDependencies from './link_dependencies';
-import wrapBidiChars from './wrap_bidi_chars';
-import wrapLines from './wrap_lines';
-
-export const HLJS_ON_AFTER_HIGHLIGHT = 'after:highlight';
-
-/**
- * Registers our plugins for Highlight.js
- *
- * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
- *
- * @param {Object} hljs - the Highlight.js instance.
- */
-export const registerPlugins = (hljs, fileType, rawContent, shouldWrapLines) => {
-  hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapChildNodes });
-  hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapBidiChars });
-  hljs.addPlugin({
-    [HLJS_ON_AFTER_HIGHLIGHT]: (result) => linkDependencies(result, fileType, rawContent),
-  });
-  if (shouldWrapLines) hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapLines });
-};
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/mark_multiple_lines.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/mark_multiple_lines.js
new file mode 100644
index 0000000000000000000000000000000000000000..055efc8d077bc43010a219cab442223542d347d6
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/mark_multiple_lines.js
@@ -0,0 +1,41 @@
+/**
+ * Highlight.js plugin for wrapping lines in the correct classes and attributes.
+ * Needed to highlight a large amount of lines
+ *
+ * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
+ *
+ * @param {String} content - represent highlighted line of code
+ * @param {number} lineNum - represent highlighted line number
+ * @param {Object} markLineInfo - highlighting info for the current line
+ */
+function markLinesWithDiv(content, lineNum, markLineInfo) {
+  let wrappedLine = content;
+
+  const stepNumberSpan =
+    lineNum === markLineInfo?.startLine
+      ? `<span class="inline-item-mark">${markLineInfo.index + 1}</span>`
+      : '';
+  const stepNumberSpanNone =
+    lineNum !== markLineInfo?.startLine && markLineInfo
+      ? `<span class="inline-item-mark gl-opacity-0">${markLineInfo.index + 1}</span>`
+      : '';
+
+  if (markLineInfo) {
+    const contentStartIndex = content.indexOf(content.trimStart());
+    wrappedLine = `${content.slice(
+      0,
+      contentStartIndex,
+    )}${stepNumberSpanNone}<span id="TEXT-MARKER${
+      markLineInfo.index + 1
+    }-L${lineNum}" class="inline-section-marker">${stepNumberSpan}${content.slice(contentStartIndex)}</span>`;
+  }
+  return `<div class="line">${wrappedLine}</div>`;
+}
+
+export default (result, lineToMarkersInfo) => {
+  // eslint-disable-next-line no-param-reassign
+  result.value = result.value
+    .split(/\r?\n/)
+    .map((content, index) => markLinesWithDiv(content, index + 1, lineToMarkersInfo?.[index + 1]))
+    .join('\n');
+};
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_lines.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_lines.js
index 384ada300013b29d1182242ab0436aa5ec9bac2f..b0471e2af98c7d0b959456e471f7cbc199f8ec93 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_lines.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_lines.js
@@ -4,7 +4,9 @@
  *
  * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
  *
- * @param {Object} Result - an object that represents the highlighted result from Highlight.js
+ * @param content - represents the highlighted content
+ * @param number - represents the highlighted line number
+ * @param language - represents the highlighted language
  */
 
 function wrapLine(content, number, language) {
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js b/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
index 057a1c2d1133b305393354da499fa3e37f007d3e..713832cac4e4eee91104b2dc74f91cec4aef6e38 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
@@ -1,37 +1,7 @@
-import hljs from 'highlight.js/lib/core';
-import languageLoader from '~/content_editor/services/highlight_js_language_loader';
-import { registerPlugins } from '../plugins/index';
+import { highlightPlugins } from '~/highlight_js/plugins';
+import { highlightContent } from '~/highlight_js';
 import { LINES_PER_CHUNK, NEWLINE, ROUGE_TO_HLJS_LANGUAGE_MAP } from '../constants';
 
-const loadLanguage = async (language) => {
-  const languageDefinition = await languageLoader[language]();
-  hljs.registerLanguage(language, languageDefinition.default);
-};
-
-const loadSubLanguages = async (languageDefinition) => {
-  // Some files can contain sub-languages (i.e., Svelte); this ensures that sub-languages are also loaded
-  if (!languageDefinition?.contains) return;
-
-  // generate list of languages to load
-  const languages = new Set(
-    languageDefinition.contains
-      .filter((component) => Boolean(component.subLanguage))
-      .map((component) => component.subLanguage),
-  );
-
-  if (languageDefinition.subLanguage) {
-    languages.add(languageDefinition.subLanguage);
-  }
-
-  await Promise.all([...languages].map(loadLanguage));
-};
-
-const initHighlightJs = async (fileType, content, language) => {
-  registerPlugins(hljs, fileType, content, true);
-  await loadLanguage(language);
-  await loadSubLanguages(hljs.getLanguage(language));
-};
-
 const splitByLineBreaks = (content = '') => content.split(/\r?\n/);
 
 const createChunk = (language, rawChunkLines, highlightedChunkLines = [], startingFrom = 0) => ({
@@ -59,15 +29,15 @@ const splitIntoChunks = (language, rawContent, highlightedContent) => {
 
 const highlight = async (fileType, rawContent, lang) => {
   const language = ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()];
-  let result;
+  let highlightedChunks;
 
   if (language) {
-    await initHighlightJs(fileType, rawContent, language);
-    const highlightedContent = hljs.highlight(rawContent, { language }).value;
-    result = splitIntoChunks(language, rawContent, highlightedContent);
+    const plugins = highlightPlugins(fileType, rawContent, true);
+    const highlightedContent = await highlightContent(lang, rawContent, plugins);
+    highlightedChunks = splitIntoChunks(language, rawContent, highlightedContent);
   }
 
-  return result;
+  return highlightedChunks;
 };
 
 export { highlight, splitIntoChunks };
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..514d9051e707356729f2fc1456910d90ce9511c4
--- /dev/null
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue
@@ -0,0 +1,79 @@
+<script>
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import CodeBlock from '~/vue_shared/components/code_block.vue';
+
+export default {
+  name: 'VulnerabilityFileContentViewer',
+  components: { CodeBlock },
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    startLine: { type: Number, required: false, default: null },
+    endLine: { type: Number, required: false, default: null },
+    isHighlighted: { type: Boolean, required: false, default: false },
+    content: { type: String, required: true },
+    highlightInfo: { type: Array, required: false, default: () => [] },
+  },
+  data() {
+    return {
+      loadingError: false,
+    };
+  },
+  computed: {
+    lineNumbers() {
+      const linesNumbers = [];
+      this.highlightInfo.forEach((highlight) => {
+        linesNumbers.push({ lineNumber: highlight.startLine, stepNumber: highlight.stepNumber });
+      });
+      return Array.from({ length: this.endLine - this.startLine + 1 }, (_, i) => ({
+        lineNumber: this.startLine + i,
+        stepNumber: linesNumbers.find((line) => line.lineNumber === this.startLine + i)?.stepNumber,
+      }));
+    },
+    sourceCodeLines() {
+      const lines = this.content.split('\n');
+      // content is the entire file, the GraphQL query does not have the ability to get only certain lines of the
+      // file. Because we only need certain lines, we'll split the lines into an array, slice out only those lines, then
+      // rejoin it back into a string so that the code block component can render it properly.
+      return lines
+        .slice(Math.max(this.startLine - 1, 0), Math.min(this.endLine, lines.length))
+        .map((line) => line || ' ') // to display empty lines as well!
+        .join('\n');
+    },
+    userColorTheme() {
+      return gon.user_color_scheme;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="file-holder">
+    <div
+      :class="userColorTheme"
+      class="code blob-viewer file-content gl-flex gl-items-center gl-overflow-auto gl-rounded-base"
+    >
+      <div
+        class="line-numbers line-links diff-line-num gl-absolute gl-z-3 !gl-p-0 hover:!gl-bg-transparent gl-border-r"
+        data-testid="line-numbers"
+      >
+        <a
+          v-for="line in lineNumbers"
+          :id="`NUM-MARKER${line.stepNumber}-L${line.lineNumber}`"
+          :key="line.lineNumber"
+          class="file-line-num hover:gl-no-underline"
+        >
+          {{ line.lineNumber }}
+        </a>
+      </div>
+
+      <code-block
+        class="highlight !gl-overflow-visible !gl-p-0 !gl-border-none gl-grow !gl-leading-20"
+      >
+        <code v-if="isHighlighted" v-safe-html="sourceCodeLines" class="d-block"></code>
+        <span v-else v-safe-html="sourceCodeLines" class="plain-lines"></span>
+      </code-block>
+    </div>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
index 132c4522560ad5a0832a9e0b5880ffdcda636161..130290be9017fe3e2aa0b21822cb295948d99701 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
@@ -1,23 +1,30 @@
 <script>
 import { GlSkeletonLoader, GlAlert, GlSprintf } from '@gitlab/ui';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import vulnerabilityBlobInfoQuery from 'ee/security_dashboard/graphql/queries/vulnerability_blob_info.query.graphql';
-import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
+import VulnerabilityFileContentViewer from 'ee/vulnerabilities/components/vulnerability_file_content_viewer.vue';
 import { getRefFromBlobPath } from 'ee/vulnerabilities/helpers';
+import { highlightContent } from '~/highlight_js';
 
 export default {
-  components: { GlSkeletonLoader, GlAlert, GlSprintf, CodeBlockHighlighted },
+  components: {
+    VulnerabilityFileContentViewer,
+    GlSkeletonLoader,
+    GlAlert,
+    GlSprintf,
+  },
   inject: ['projectFullPath'],
   props: {
     location: { type: Object, required: true },
   },
   data() {
     return {
-      blobInfo: null,
+      blobContent: null,
       loadingError: false,
     };
   },
   apollo: {
-    blobInfo: {
+    blobContent: {
       query: vulnerabilityBlobInfoQuery,
       variables() {
         return {
@@ -29,7 +36,17 @@ export default {
         };
       },
       update({ project }) {
-        return project.repository.blobs.nodes[0];
+        const data = project.repository.blobs.nodes[0];
+        if (!data) return data;
+
+        highlightContent(data.language, data.rawTextBlob)
+          .then((res) => {
+            this.highlightedContent = res;
+          })
+          .catch((error) => {
+            Sentry.captureException(error);
+          });
+        return data.rawTextBlob;
       },
       error() {
         this.loadingError = true;
@@ -37,27 +54,19 @@ export default {
     },
   },
   computed: {
+    isHighlighted() {
+      return Boolean(this.highlightedContent);
+    },
+    content() {
+      return this.highlightedContent || this.blobContent;
+    },
+
     startLine() {
       return this.location.startLine;
     },
     endLine() {
       return this.location.endLine || this.startLine;
     },
-    lineNumbers() {
-      const numbers = [];
-      for (let i = this.startLine; i <= this.endLine; i += 1) {
-        numbers.push(i);
-      }
-
-      return numbers;
-    },
-    sourceCodeLines() {
-      // rawTextBlob is the entire file, the GraphQL query does not have the ability to get only certain lines of the
-      // file. Because we only need certain lines, we'll split the lines into an array, slice out only those lines, then
-      // rejoin it back into a string so that the code block component can render it properly.
-      const lines = this.blobInfo.rawTextBlob.split('\n');
-      return lines.slice(this.startLine - 1, this.endLine).join('\n');
-    },
     ref() {
       return getRefFromBlobPath(this.location.blobPath);
     },
@@ -70,7 +79,7 @@ export default {
 
 <template>
   <div
-    v-if="$apollo.queries.blobInfo.loading"
+    v-if="$apollo.queries.blobContent.loading"
     :class="userColorTheme"
     class="code gl-p-3 gl-pb-2 gl-rounded-base"
   >
@@ -87,7 +96,7 @@ export default {
   </gl-alert>
 
   <gl-alert
-    v-else-if="!blobInfo"
+    v-else-if="!blobContent"
     :dismissible="false"
     variant="warning"
     data-testid="file-not-found-warning"
@@ -102,28 +111,11 @@ export default {
     </gl-sprintf>
   </gl-alert>
 
-  <div v-else class="file-holder">
-    <div
-      :class="userColorTheme"
-      class="code blob-viewer file-content gl-display-flex gl-align-items-center gl-overflow-auto gl-rounded-base"
-    >
-      <div
-        class="line-numbers line-links diff-line-num gl-absolute gl-z-3 gl-p-0! gl-hover-bg-transparent! gl-border-r"
-        data-testid="line-numbers"
-      >
-        <a
-          v-for="lineNumber in lineNumbers"
-          :key="lineNumber"
-          class="file-line-num gl-hover-text-decoration-none"
-        >
-          {{ lineNumber }}
-        </a>
-      </div>
-      <code-block-highlighted
-        :language="blobInfo.language"
-        :code="sourceCodeLines"
-        class="gl-overflow-visible! gl-p-0! gl-border-none! !gl-leading-20"
-      />
-    </div>
-  </div>
+  <vulnerability-file-content-viewer
+    v-else
+    :start-line="startLine"
+    :end-line="endLine"
+    :is-highlighted="isHighlighted"
+    :content="content"
+  />
 </template>
diff --git a/ee/spec/frontend/vulnerabilities/vulnerability_file_content_viewer_spec.js b/ee/spec/frontend/vulnerabilities/vulnerability_file_content_viewer_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..f1000508ebe306740f3824b45aca9d3fdf18eda1
--- /dev/null
+++ b/ee/spec/frontend/vulnerabilities/vulnerability_file_content_viewer_spec.js
@@ -0,0 +1,65 @@
+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import VulnerabilityFileContentViewer from 'ee/vulnerabilities/components/vulnerability_file_content_viewer.vue';
+import CodeBlock from '~/vue_shared/components/code_block.vue';
+
+Vue.use(VueApollo);
+
+const vulFileContent = {
+  startLine: 2,
+  endLine: 4,
+  isHighlighted: false,
+  content: 'line 1\nline 2\nline 3\nline 4\nline 5',
+  highlightInfo: [],
+};
+const spanContent = '<span class="plain-lines">line 2\nline 3\nline 4</span>';
+const codeContent = '<code class="d-block">line 2\nline 3\nline 4</code>';
+
+describe('Vulnerability File Contents Viewer component', () => {
+  let wrapper;
+
+  const createWrapper = (vulnerabilityOverrides = {}) => {
+    const propsData = {
+      startLine: vulFileContent.startLine,
+      endLine: vulFileContent.endLine,
+      isHighlighted: vulFileContent.isHighlighted, // Ensure this matches the required prop
+      content: vulFileContent.content,
+      highlightInfo: vulFileContent.highlightInfo,
+      ...vulnerabilityOverrides,
+    };
+
+    wrapper = shallowMountExtended(VulnerabilityFileContentViewer, {
+      propsData,
+    });
+  };
+
+  const findCodeBlock = () => wrapper.findComponent(CodeBlock);
+
+  describe('file contents loaded', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('shows the correct line numbers', () => {
+      expect(wrapper.findByTestId('line-numbers').text()).toMatchInterpolatedText('2 3 4');
+    });
+
+    it('shows the source code', () => {
+      expect(findCodeBlock().exists()).toBe(true);
+    });
+
+    it('passes the given value to the code-block component when isHighlighted=false', () => {
+      expect(wrapper.find('span').exists()).toBe(true);
+      expect(wrapper.find('code').exists()).toBe(false);
+      expect(wrapper.find('span').html()).toContain(spanContent);
+    });
+
+    it('passes the given value to the code-block component when isHighlighted=true', () => {
+      createWrapper({ isHighlighted: true });
+      expect(wrapper.find('span').exists()).toBe(false);
+      expect(wrapper.find('code').exists()).toBe(true);
+      expect(wrapper.find('code').html()).toContain(codeContent);
+    });
+  });
+});
diff --git a/ee/spec/frontend/vulnerabilities/vulnerability_file_contents_spec.js b/ee/spec/frontend/vulnerabilities/vulnerability_file_contents_spec.js
index 47b5b374372ee454811c221df1636276c13c9c2e..12c55880a6c878842dff208bfc0a92a68a947f4b 100644
--- a/ee/spec/frontend/vulnerabilities/vulnerability_file_contents_spec.js
+++ b/ee/spec/frontend/vulnerabilities/vulnerability_file_contents_spec.js
@@ -6,7 +6,7 @@ import VulnerabilityFileContents from 'ee/vulnerabilities/components/vulnerabili
 import vulnerabilityBlobInfoQuery from 'ee/security_dashboard/graphql/queries/vulnerability_blob_info.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
+import VulnerabilityFileContentViewer from 'ee/vulnerabilities/components/vulnerability_file_content_viewer.vue';
 
 Vue.use(VueApollo);
 
@@ -77,14 +77,12 @@ describe('Vulnerability File Contents component', () => {
       return waitForPromises();
     });
 
-    it('shows the correct line numbers', () => {
-      expect(wrapper.findByTestId('line-numbers').text()).toMatchInterpolatedText('2 3 4');
-    });
-
     it('shows the source code', () => {
-      expect(wrapper.findComponent(CodeBlockHighlighted).props()).toMatchObject({
-        code: 'line 2\nline 3\nline 4',
-        language: blobData.language,
+      expect(wrapper.findComponent(VulnerabilityFileContentViewer).props()).toMatchObject({
+        startLine: location.startLine,
+        endLine: location.endLine,
+        isHighlighted: false,
+        content: blobData.rawTextBlob,
       });
     });
   });
diff --git a/spec/frontend/highlight_js/index_spec.js b/spec/frontend/highlight_js/index_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..bcf2e40510f88cd71e0dc5f8036d80d85cdd0124
--- /dev/null
+++ b/spec/frontend/highlight_js/index_spec.js
@@ -0,0 +1,62 @@
+import hljsCore from 'highlight.js/lib/core';
+import languageLoader from '~/content_editor/services/highlight_js_language_loader';
+import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants';
+import { highlightContent } from '~/highlight_js';
+
+jest.mock('highlight.js/lib/core');
+jest.mock('~/content_editor/services/highlight_js_language_loader');
+
+describe('highlightContent', () => {
+  const mockHljsInstance = {
+    registerLanguage: jest.fn(),
+    addPlugin: jest.fn(),
+    highlight: jest.fn(),
+    getLanguage: jest.fn(),
+  };
+
+  beforeEach(() => {
+    hljsCore.newInstance.mockReturnValue(mockHljsInstance);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should highlight content with a known language', async () => {
+    const lang = 'ruby';
+    const rawContent = 'puts "Hello, world!"';
+    const plugins = [];
+    const hljsLanguage = 'ruby';
+
+    ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()] = hljsLanguage;
+
+    const mockLanguageDefinition = { default: jest.fn(), contains: [] };
+    languageLoader[hljsLanguage] = jest.fn().mockResolvedValue(mockLanguageDefinition);
+    mockHljsInstance.highlight.mockReturnValue({
+      value: '<span class="hljs-keyword">puts</span> "Hello, world!"',
+    });
+    mockHljsInstance.getLanguage.mockReturnValue(mockLanguageDefinition);
+
+    const result = await highlightContent(lang, rawContent, plugins);
+
+    expect(languageLoader[hljsLanguage]).toHaveBeenCalled();
+    expect(mockHljsInstance.registerLanguage).toHaveBeenCalledWith(
+      hljsLanguage,
+      mockLanguageDefinition.default,
+    );
+    expect(mockHljsInstance.highlight).toHaveBeenCalledWith(rawContent, { language: hljsLanguage });
+    expect(result).toBe('<span class="hljs-keyword">puts</span> "Hello, world!"');
+  });
+
+  it('should return undefined for an unknown language', async () => {
+    const lang = 'unknownLanguage';
+    const rawContent = 'some content';
+    const plugins = [];
+
+    ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()] = undefined;
+
+    const result = await highlightContent(lang, rawContent, plugins);
+
+    expect(result).toBeUndefined();
+  });
+});
diff --git a/spec/frontend/highlight_js/plugins/index_spec.js b/spec/frontend/highlight_js/plugins/index_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..78c33406f31f1b8f568a61fa0ed3d132c0794737
--- /dev/null
+++ b/spec/frontend/highlight_js/plugins/index_spec.js
@@ -0,0 +1,60 @@
+import { highlightPlugins, registerPlugins } from '~/highlight_js/plugins';
+import wrapChildNodes from '~/vue_shared/components/source_viewer/plugins/wrap_child_nodes';
+import wrapBidiChars from '~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars';
+
+jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_child_nodes', () => 'wrapChildNodes');
+jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars', () => 'wrapBidiChars');
+jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_lines', () => 'wrapLines');
+
+describe('index.js', () => {
+  describe('highlightPlugins', () => {
+    it('returns correct plugins without wrapping lines', () => {
+      const result = highlightPlugins('javascript', 'const x = 5;', false);
+
+      expect(result).toHaveLength(3);
+      expect(result[0]).toBe(wrapChildNodes);
+      expect(result[1]).toBe(wrapBidiChars);
+      expect(typeof result[2]).toBe('function');
+    });
+
+    it('adds wrapLines when shouldWrapLines is true', () => {
+      const withoutWrapLines = highlightPlugins('js', 'code', false);
+      const withWrapLines = highlightPlugins('js', 'code', true);
+
+      expect(withoutWrapLines).not.toContain('wrapLines');
+      expect(withWrapLines).toContain('wrapLines');
+      expect(withWrapLines.length).toBe(withoutWrapLines.length + 1);
+    });
+  });
+
+  describe('registerPlugins', () => {
+    let mockHljs;
+
+    beforeEach(() => {
+      mockHljs = { addPlugin: jest.fn() };
+    });
+
+    it('registers each plugin with hljs', () => {
+      const mockPlugins = [jest.fn(), jest.fn()];
+      registerPlugins(mockHljs, mockPlugins);
+
+      expect(mockHljs.addPlugin).toHaveBeenCalledTimes(2);
+      mockPlugins.forEach((plugin) => {
+        expect(mockHljs.addPlugin).toHaveBeenCalledWith({
+          'after:highlight': plugin,
+        });
+      });
+    });
+
+    it('does nothing when plugins array is empty', () => {
+      registerPlugins(mockHljs, []);
+      expect(mockHljs.addPlugin).not.toHaveBeenCalled();
+    });
+
+    it('does nothing when plugins is null or undefined', () => {
+      registerPlugins(mockHljs, null);
+      registerPlugins(mockHljs, undefined);
+      expect(mockHljs.addPlugin).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js b/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js
index c84a39274f879a1712b3a36e3612383568795494..43a28bdec24811de0a5bc80d7016424248ebd87f 100644
--- a/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js
@@ -1,104 +1,73 @@
-import hljs from 'highlight.js/lib/core';
-import { registerPlugins } from '~/vue_shared/components/source_viewer/plugins/index';
-import { highlight } from '~/vue_shared/components/source_viewer/workers/highlight_utils';
-import { LINES_PER_CHUNK, NEWLINE } from '~/vue_shared/components/source_viewer/constants';
-
-jest.mock('highlight.js/lib/core', () => ({
-  highlight: jest.fn().mockReturnValue({ value: 'highlighted content' }),
-  registerLanguage: jest.fn(),
-  getLanguage: jest.fn(),
-}));
-
-jest.mock('~/vue_shared/components/source_viewer/plugins/index', () => ({
-  registerPlugins: jest.fn(),
-}));
-
-const fileType = 'text';
-const rawContent = 'function test() { return true }; \n // newline';
-const highlightedContent = 'highlighted content';
-const language = 'json';
-
-describe('Highlight utility', () => {
-  beforeEach(() => highlight(fileType, rawContent, language));
-
-  it('registers the language', () => {
-    expect(hljs.registerLanguage).toHaveBeenCalledWith(language, expect.any(Function));
-  });
-
-  it('registers the plugins', () => {
-    expect(registerPlugins).toHaveBeenCalled();
-  });
-
-  describe('sub-languages', () => {
-    const languageDefinition = {
-      subLanguage: 'xml',
-      contains: [{ subLanguage: 'javascript' }, { subLanguage: 'typescript' }],
-    };
-
-    beforeEach(async () => {
-      jest.spyOn(hljs, 'getLanguage').mockReturnValue(languageDefinition);
-      await highlight(fileType, rawContent, language);
-    });
-
-    it('registers the primary sub-language', () => {
-      expect(hljs.registerLanguage).toHaveBeenCalledWith(
-        languageDefinition.subLanguage,
-        expect.any(Function),
-      );
-    });
-
-    it.each(languageDefinition.contains)(
-      'registers the rest of the sub-languages',
-      ({ subLanguage }) => {
-        expect(hljs.registerLanguage).toHaveBeenCalledWith(subLanguage, expect.any(Function));
-      },
-    );
+import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants';
+import {
+  highlight,
+  splitIntoChunks,
+} from '~/vue_shared/components/source_viewer/workers/highlight_utils';
+import { highlightContent } from '~/highlight_js';
+
+jest.mock('~/highlight_js');
+
+describe('highlight', () => {
+  const fileType = 'javascript';
+  const rawContent = 'const a = 1;\nconst b = 2;\n';
+  const lang = 'javascript';
+  const highlightedContent =
+    '<span class="hljs-keyword">const</span> a = 1;\n<span class="hljs-keyword">const</span> b = 2;\n';
+
+  beforeEach(() => {
+    ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()] = lang;
+    highlightContent.mockResolvedValue(highlightedContent);
   });
 
-  it('highlights the content', () => {
-    expect(hljs.highlight).toHaveBeenCalledWith(rawContent, { language });
+  afterEach(() => {
+    jest.resetAllMocks();
   });
 
-  it('splits the content into chunks', async () => {
-    const contentArray = Array.from({ length: 140 }, () => 'newline'); // simulate 140 lines of code
-
-    const chunks = [
+  it('should highlight content and split into chunks', async () => {
+    const expectedChunks = [
       {
-        language,
         highlightedContent,
-        rawContent: contentArray.slice(0, 70).join(NEWLINE), // first 70 lines
+        rawContent,
+        totalLines: 3,
         startingFrom: 0,
-        totalLines: LINES_PER_CHUNK,
-      },
-      {
-        language,
-        highlightedContent: '',
-        rawContent: contentArray.slice(70, 140).join(NEWLINE), // last 70 lines
-        startingFrom: 70,
-        totalLines: LINES_PER_CHUNK,
+        language: lang,
       },
     ];
+    const result = await highlight(fileType, rawContent, lang);
 
-    expect(await highlight(fileType, contentArray.join(NEWLINE), language)).toEqual(
-      expect.arrayContaining(chunks),
-    );
+    expect(highlightContent).toHaveBeenCalledWith(lang, rawContent, expect.any(Array));
+    expect(result).toEqual(expectedChunks);
   });
-});
-
-describe('unsupported languages', () => {
-  const unsupportedLanguage = 'some_unsupported_language';
 
-  beforeEach(() => highlight(fileType, rawContent, unsupportedLanguage));
+  it('should return undefined for an unknown language', async () => {
+    ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()] = undefined;
+    const result = await highlight(fileType, rawContent, lang);
 
-  it('does not register plugins', () => {
-    expect(registerPlugins).not.toHaveBeenCalled();
+    expect(result).toBeUndefined();
   });
+});
 
-  it('does not attempt to highlight the content', () => {
-    expect(hljs.highlight).not.toHaveBeenCalled();
-  });
+describe('splitIntoChunks', () => {
+  it('should split content into chunks', () => {
+    const language = 'javascript';
+    const rawContent = 'const a = 1;\nconst b = 2;\nconst c = 3;\nconst d = 4;\n';
+    const highlightedContent =
+      '<span class="hljs-keyword">const</span> a = 1;\n<span class="hljs-keyword">const</span> b = 2;\n<span class="hljs-keyword">const</span> c = 3;\n<span class="hljs-keyword">const</span> d = 4;\n';
 
-  it('does not return a result', async () => {
-    expect(await highlight(fileType, rawContent, unsupportedLanguage)).toBe(undefined);
+    const expectedChunks = [
+      {
+        highlightedContent:
+          '<span class="hljs-keyword">const</span> a = 1;\n' +
+          '<span class="hljs-keyword">const</span> b = 2;\n' +
+          '<span class="hljs-keyword">const</span> c = 3;\n' +
+          '<span class="hljs-keyword">const</span> d = 4;\n',
+        rawContent: 'const a = 1;\nconst b = 2;\nconst c = 3;\nconst d = 4;\n',
+        totalLines: 5,
+        startingFrom: 0,
+        language: 'javascript',
+      },
+    ];
+    const result = splitIntoChunks(language, rawContent, highlightedContent);
+    expect(result).toEqual(expectedChunks);
   });
 });
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/index_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/index_spec.js
deleted file mode 100644
index 57045ca54ae224cddaa042dd137ad8e75be77d69..0000000000000000000000000000000000000000
--- a/spec/frontend/vue_shared/components/source_viewer/plugins/index_spec.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import {
-  registerPlugins,
-  HLJS_ON_AFTER_HIGHLIGHT,
-} from '~/vue_shared/components/source_viewer/plugins/index';
-import wrapChildNodes from '~/vue_shared/components/source_viewer/plugins/wrap_child_nodes';
-import wrapBidiChars from '~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars';
-
-jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_child_nodes');
-const hljsMock = { addPlugin: jest.fn() };
-
-describe('Highlight.js plugin registration', () => {
-  beforeEach(() => registerPlugins(hljsMock));
-
-  it('registers our plugins', () => {
-    expect(hljsMock.addPlugin).toHaveBeenCalledWith({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapBidiChars });
-    expect(hljsMock.addPlugin).toHaveBeenCalledWith({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapChildNodes });
-  });
-});
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/mark_multi_lines_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/mark_multi_lines_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..f10a3964ec5d34e259323e6fd2826f76483e2b6b
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/plugins/mark_multi_lines_spec.js
@@ -0,0 +1,22 @@
+import markMultipleLines from '~/vue_shared/components/source_viewer/plugins/mark_multiple_lines';
+
+describe('Highlight.js plugin for mark multi lines', () => {
+  it('mutates the input value by marking multi lines and numbering', () => {
+    const inputValue = `<span class="hljs-keyword">FROM</span> alpine:latest<span class="hljs-keyword">COPY</span> . /tmp<span class="hljs-keyword">CMD</span> /tmp/run-app`;
+    const hljsResultMock = { value: inputValue, language: 'dockerfile' };
+    const lineToMarkersInfo = {
+      1: {
+        index: 1,
+        startLine: 1,
+        endLine: 2,
+        stepNumber: 2,
+      },
+    };
+
+    const wrappedLine = `<span id="TEXT-MARKER2-L1" class="inline-section-marker"><span class="inline-item-mark">2</span><span class="hljs-keyword">FROM</span> alpine:latest<span class="hljs-keyword">COPY</span> . /tmp<span class="hljs-keyword">CMD</span> /tmp/run-app</span>`;
+    const outputValue = `<div class="line">${wrappedLine}</div>`;
+
+    markMultipleLines(hljsResultMock, lineToMarkersInfo);
+    expect(hljsResultMock.value).toBe(outputValue);
+  });
+});