2 files changed, 25 insertions, 2 deletions
diff --git a/app/assets/javascripts/code_navigation/components/doc_line.vue b/app/assets/javascripts/code_navigation/components/doc_line.vue
new file mode 100644
index 00000000000..69d398893d9
--- /dev/null
+++ b/app/assets/javascripts/code_navigation/components/doc_line.vue
@@ -0,0 +1,22 @@
+<script>
+export default {
+  props: {
+    language: {
+      type: String,
+      required: true,
+    },
+    tokens: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <span class="line" :lang="language">
+    <span v-for="(token, tokenIndex) in tokens" :key="tokenIndex" :class="token.class">{{
+      token.value
+    }}</span>
+  </span>
+</template>
diff --git a/app/assets/javascripts/code_navigation/components/popover.vue b/app/assets/javascripts/code_navigation/components/popover.vue
index 7147ce227e8..df5f89e4faf 100644
--- a/app/assets/javascripts/code_navigation/components/popover.vue
+++ b/app/assets/javascripts/code_navigation/components/popover.vue
@@ -1,9 +1,11 @@
 <script>
 import { GlButton } from '@gitlab/ui';
+import DocLine from './doc_line.vue';
 
 export default {
   components: {
     GlButton,
+    DocLine,
   },
   props: {
     position: {
@@ -83,8 +85,7 @@ export default {
         ref="code-output"
         :class="$options.colorScheme"
         class="border-0 bg-transparent m-0 code highlight"
-        v-html="hover.value"
-      ></pre>
+      ><doc-line v-for="(tokens, tokenIndex) in hover.tokens" :key="tokenIndex" :language="hover.language" :tokens="tokens"/></pre>
       <p v-else ref="doc-output" class="p-3 m-0">
         {{ hover.value }}
       </p>