1 files changed, 40 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer.vue
index 8f0d051543f..99895926653 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer.vue
@@ -1,6 +1,9 @@
 <script>
 import { GlSafeHtmlDirective } from '@gitlab/ui';
 import LineNumbers from '~/vue_shared/components/line_numbers.vue';
+import { sanitize } from '~/lib/dompurify';
+
+const LINE_SELECT_CLASS_NAME = 'hll';
 
 export default {
   components: {
@@ -46,7 +49,15 @@ export default {
         }
       }
 
-      return highlightedContent;
+      return this.wrapLines(highlightedContent);
+    },
+  },
+  watch: {
+    highlightedContent() {
+      this.$nextTick(() => this.selectLine());
+    },
+    $route() {
+      this.selectLine();
     },
   },
   async mounted() {
@@ -73,16 +84,40 @@ export default {
 
       return languageDefinition;
     },
+    wrapLines(content) {
+      return (
+        content &&
+        content
+          .split('\n')
+          .map((line, i) => `<span id="LC${i + 1}" class="line">${line}</span>`)
+          .join('\r\n')
+      );
+    },
+    selectLine() {
+      const hash = sanitize(this.$route.hash);
+      const lineToSelect = hash && this.$el.querySelector(hash);
+
+      if (!lineToSelect) {
+        return;
+      }
+
+      if (this.$options.currentlySelectedLine) {
+        this.$options.currentlySelectedLine.classList.remove(LINE_SELECT_CLASS_NAME);
+      }
+
+      lineToSelect.classList.add(LINE_SELECT_CLASS_NAME);
+      this.$options.currentlySelectedLine = lineToSelect;
+      lineToSelect.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    },
   },
   userColorScheme: window.gon.user_color_scheme,
+  currentlySelectedLine: null,
 };
 </script>
 <template>
-  <div class="file-content code" :class="$options.userColorScheme">
+  <div class="file-content code js-syntax-highlight" :class="$options.userColorScheme">
     <line-numbers :lines="lineNumbers" />
-    <pre
-      class="code gl-pl-3!"
-    ><code v-safe-html="highlightedContent" class="gl-white-space-pre-wrap!"></code>
+    <pre class="code"><code v-safe-html="highlightedContent"></code>
     </pre>
   </div>
 </template>