refactor: Create and use Pre tag

src/components/Pre.vue

@@ -0,0 +1,12 @@
+/* To reduce whitespace, make sure to keep everything on one line here. */
+<template>
+  <pre><code><slot></slot></code></pre>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "Pre",
+});
+</script>

src/components/Results.vue

@@ -12,21 +12,22 @@
 
     <div>
       <h3>Code</h3>
-      <!-- To reduce whitespace, make sure to keep everything on one line here. -->
-      <pre><code>{{ result }}</code></pre>
+      <Pre>{{ result }}</Pre>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 
+import Pre from "@/components/Pre.vue";
 import Markdown from "@/components/Markdown.vue";
 
 export default Vue.extend({
   name: "Results",
   components: {
     Markdown,
+    Pre,
   },
   props: {
     result: String,

src/views/Catalogue.vue

@@ -20,7 +20,7 @@
       <div class="col-12">
         <div v-for="item in renderedBadges" v-bind:key="item">
           <Markdown :content="item"></Markdown>
-          <pre><code>{{ item }}</code></pre>
+          <Pre>{{ item }}</Pre>
           <br />
         </div>
       </div>
@@ -31,13 +31,15 @@
 <script lang="ts">
 import Vue from "vue";
 
+import Pre from "@/components/Pre.vue";
 import Markdown from "@/components/Markdown.vue";
 import { renderBadges } from "@/core/catalogue";
 
 export default Vue.extend({
   name: "Catalogue",
   components: {
     Markdown,
+    Pre,
   },
   computed: {
     renderedBadges() {