Code nav: Accept tokens instead of raw HTML on FE

It's a safer and more natural approach

app/assets/javascripts/code_navigation/components/doc_line.vue

+<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>

app/assets/javascripts/code_navigation/components/popover.vue

 <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>

spec/frontend/code_navigation/components/__snapshots__/popover_spec.js.snap

@@ -16,7 +16,27 @@ exports[`Code navigation popover component renders popover 1`] = `
     <pre
       class="border-0 bg-transparent m-0 code highlight"
     >
-      console.log
+      <span
+        class="line"
+        lang="javascript"
+      >
+        <span
+          class="k"
+        >
+          function
+        </span>
+        <span>
+           main() {
+        </span>
+      </span>
+      <span
+        class="line"
+        lang="javascript"
+      >
+        <span>
+          }
+        </span>
+      </span>
     </pre>
   </div>
    

spec/frontend/code_navigation/components/popover_spec.js

 import { shallowMount } from '@vue/test-utils';
 import Popover from '~/code_navigation/components/popover.vue';
+import DocLine from '~/code_navigation/components/doc_line.vue';
 
 const DEFINITION_PATH_PREFIX = 'http://gitlab.com';
 
@@ -7,7 +8,22 @@ const MOCK_CODE_DATA = Object.freeze({
   hover: [
     {
       language: 'javascript',
-      value: 'console.log',
+      tokens: [
+        [
+          {
+            class: 'k',
+            value: 'function',
+          },
+          {
+            value: ' main() {',
+          },
+        ],
+        [
+          {
+            value: '}',
+          },
+        ],
+      ],
     },
   ],
   definition_path: 'test.js#L20',
@@ -28,6 +44,7 @@ let wrapper;
 function factory({ position, data, definitionPathPrefix, blobPath = 'index.js' }) {
   wrapper = shallowMount(Popover, {
     propsData: { position, data, definitionPathPrefix, blobPath },
+    stubs: { DocLine },
   });
 }