1 files changed, 19 insertions, 4 deletions

diff --git a/app/assets/javascripts/repository/mixins/highlight_mixin.js b/app/assets/javascripts/repository/mixins/highlight_mixin.js
index 5b6f68681bb..fa4f0f48512 100644
--- a/app/assets/javascripts/repository/mixins/highlight_mixin.js
+++ b/app/assets/javascripts/repository/mixins/highlight_mixin.js
@@ -8,6 +8,8 @@ import { splitIntoChunks } from '~/vue_shared/components/source_viewer/workers/h
 import LineHighlighter from '~/blob/line_highlighter';
 import languageLoader from '~/content_editor/services/highlight_js_language_loader';
 import Tracking from '~/tracking';
+import axios from '~/lib/utils/axios_utils';
+import { TEXT_FILE_TYPE } from '../constants';
 
 /*
  * This mixin is intended to be used as an interface between our highlight worker and Vue components
@@ -36,14 +38,29 @@ export default {
       this.trackEvent(EVENT_LABEL_FALLBACK, language);
       this?.onError();
     },
-    initHighlightWorker({ rawTextBlob, language, fileType }) {
-      if (language !== 'json' || !this.glFeatures.highlightJsWorker) return;
+    async handleLFSBlob(externalStorageUrl, rawPath, language) {
+      await axios
+        .get(externalStorageUrl || rawPath)
+        .then(({ data }) => this.instructWorker(data, language))
+        .catch(() => this.$emit('error'));
+    },
+    initHighlightWorker(blob, isUsingLfs) {
+      const { rawTextBlob, language, fileType, externalStorageUrl, rawPath, simpleViewer } = blob;
+
+      if (!this.glFeatures.highlightJsWorker || simpleViewer?.fileType !== TEXT_FILE_TYPE) return;
 
       if (this.isUnsupportedLanguage(language)) {
         this.handleUnsupportedLanguage(language);
         return;
       }
 
+      this.highlightWorker.onmessage = this.handleWorkerMessage;
+
+      if (isUsingLfs) {
+        this.handleLFSBlob(externalStorageUrl, rawPath, language);
+        return;
+      }
+
       /*
        * We want to start rendering content as soon as possible, but highlighting large amounts of
        * content can take long, so we render the content in phases:
@@ -64,8 +81,6 @@ export default {
 
       this.chunks = splitIntoChunks(language, firstSeventyLines);
 
-      this.highlightWorker.onmessage = this.handleWorkerMessage;
-
       // Instruct the worker to highlight the first 70 lines ASAP, this improves perceived performance.
       this.instructWorker(firstSeventyLines, language);