1 files changed, 14 insertions, 4 deletions
diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
index 2c74d56f617..3aaa7d915ea 100644
--- a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import LineHighlighter from '~/blob/line_highlighter';
 import { HIGHLIGHT_CLASS_NAME } from './constants';
 import ViewerMixin from './mixins';
 
@@ -20,13 +21,22 @@ export default {
     };
   },
   computed: {
+    refactorBlobViewerEnabled() {
+      return this.glFeatures.refactorBlobViewer;
+    },
+
     lineNumbers() {
       return this.content.split('\n').length;
     },
   },
   mounted() {
-    const { hash } = window.location;
-    if (hash) this.scrollToLine(hash, true);
+    if (this.refactorBlobViewerEnabled) {
+      // This line will be removed once we start using highlight.js on the frontend (https://gitlab.com/groups/gitlab-org/-/epics/7146)
+      new LineHighlighter(); // eslint-disable-line no-new
+    } else {
+      const { hash } = window.location;
+      if (hash) this.scrollToLine(hash, true);
+    }
   },
   methods: {
     scrollToLine(hash, scroll = false) {
@@ -51,7 +61,7 @@ export default {
 <template>
   <div>
     <div class="file-content code js-syntax-highlight" :class="$options.userColorScheme">
-      <div v-if="!hideLineNumbers" class="line-numbers">
+      <div v-if="!hideLineNumbers" class="line-numbers gl-pt-0!">
         <a
           v-for="line in lineNumbers"
           :id="`L${line}`"
@@ -67,7 +77,7 @@ export default {
       </div>
       <div class="blob-content">
         <pre
-          class="code highlight"
+          class="code highlight gl-p-0! gl-display-flex"
         ><code v-safe-html="content" :data-blob-hash="blobHash"></code></pre>
       </div>
     </div>