improve styling

src/components/Demo.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="demo__source">
       <div v-for="(file, index) in files" :key="index">
-        <p>
+        <p v-if="showFileNames">
           {{ file.name }}
         </p>
         <pre :class="`language-${file.highlight}`"><code :class="`language-${file.highlight}`" v-html="$options.filters.highlight(file.content, file.highlight)"></code></pre>
@@ -45,6 +45,10 @@ export default {
 
       return require(`~/demos/${file.path}`).default
     },
+
+    showFileNames() {
+      return this.files.length > 1
+    },
   },
 
   mounted() {

src/components/style.scss

@@ -11,5 +11,9 @@
     padding: 1rem;
     background-color: $colorBlack;
     color: $colorWhite;
+
+    code, pre {
+      padding: 0;
+    }
   }
 }

src/layouts/Default.vue

@@ -47,4 +47,8 @@ body {
 *:focus {
   outline: none;
 }
+
+:not(pre) > code[class*="language-"], pre[class*="language-"] {
+  background-color: $colorBlack;
+}
 </style>