feat: improve color boxes position in code highlighter

Author: notwindstone

src/components/themes/code/CssColorize.vue

@@ -27,12 +27,18 @@ const lines = computed(() => code.split("\n"));
         <span class="text-[#94e2d5]">
           {{ ":" }}
         </span>
+        <!-- Property value -->
         <span class="text-[#fab387]">
           {{ line.split(":")[1].split(";")[0] }}
         </span>
         <span>
           {{ ";" }}
         </span>
+        <span
+          v-if="line.split(':')[1].split(';')[0].startsWith(' #')"
+          class="ml-2 inline-block size-3 border align-sub"
+          :style="{ background: line.split(':')[1].split(';')[0] }"
+        ></span>
       </template>
       <!-- Selectors properties end -->
       <span v-else-if="line === '}'" class="text-[#f38ba8]">

src/components/themes/code/JsonColorize.vue

@@ -68,7 +68,7 @@ const parsed = computed((): {
       <span v-if="index !== Object.keys(parsed.colors).length - 1">
         {{ "," }}
       </span>
-      <span v-if="typeof value === 'string'" class="inline-block size-3 border ml-2" :style="{ background: value }" />
+      <span v-if="typeof value === 'string'" class="ml-2 inline-block size-3 border align-sub" :style="{ background: value }" />
     </div>
     <div class="whitespace-pre-wrap">
       <span class="text-[#fab370]">