Fix the display of example formats

frontend/components/organisms/documents/DocumentExportForm.vue

@@ -24,12 +24,16 @@
             :value="format"
           />
         </v-radio-group>
-        <code
+        <v-sheet
           v-if="selectedFormat"
-          class="mb-10 pa-5 highlight"
+          :dark="!$vuetify.theme.dark"
+          :light="$vuetify.theme.dark"
+          class="mb-5 pa-5"
         >
-          <span v-for="(example, index) in selectedFormat.examples" :key="index">{{ example }}</span>
-        </code>
+          <span v-for="(example, index) in selectedFormat.examples" :key="index">
+            {{ example }}<br>
+          </span>
+        </v-sheet>
       </v-form>
     </template>
   </base-card>
@@ -98,13 +102,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .highlight {
-    font-size: 100%;
-    width: 100%;
-  }
-  .highlight:before {
-    content: ''
-  }
-</style>

frontend/components/organisms/documents/DocumentUploadForm.vue

@@ -33,12 +33,16 @@
             :value="format"
           />
         </v-radio-group>
-        <code
+        <v-sheet
           v-if="selectedFormat"
-          class="mb-10 pa-5 highlight"
+          :dark="!$vuetify.theme.dark"
+          :light="$vuetify.theme.dark"
+          class="mb-5 pa-5"
         >
-          <span v-for="(example, index) in selectedFormat.examples" :key="index">{{ example }}</span>
-        </code>
+          <span v-for="(example, index) in selectedFormat.examples" :key="index">
+            {{ example }}<br>
+          </span>
+        </v-sheet>
         <h2>Select a file</h2>
         <v-file-input
           v-model="file"
@@ -121,13 +125,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .highlight {
-    font-size: 100%;
-    width: 100%;
-  }
-  .highlight:before {
-    content: ''
-  }
-</style>

frontend/components/organisms/labels/LabelImportForm.vue

@@ -22,9 +22,14 @@
           Please check available formats carefully.
         </v-alert>
         <h2>Example format</h2>
-        <code class="mb-10 pa-5 highlight">
-          <span>{{ exampleFormat }}</span>
-        </code>
+        <v-sheet
+          v-if="exampleFormat"
+          :dark="!$vuetify.theme.dark"
+          :light="$vuetify.theme.dark"
+          class="mb-5 pa-5"
+        >
+          <pre>{{ exampleFormat }}</pre>
+        </v-sheet>
         <h2>Select a file</h2>
         <v-file-input
           v-model="file"
@@ -77,7 +82,6 @@ export default {
           text_color: '#ffffff'
         }
       ]
-      console.log(JSON.stringify(data, null, 4))
       return JSON.stringify(data, null, 4)
     }
   },
@@ -110,13 +114,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .highlight {
-    font-size: 100%;
-    width: 100%;
-  }
-  .highlight:before {
-    content: ''
-  }
-</style>