Improve how code blocks are styled

Author: mcecode

astro.config.ts

@@ -37,6 +37,9 @@ sharp.cache(false);
 
 const classNamesTransformer: ShikiTransformer = {
   name: "class-names",
+  code(node) {
+    node.properties.class = "block-code";
+  },
   line(node) {
     node.properties.class = "block-code-line";
   },

src/components/page/header.astro

@@ -211,7 +211,7 @@ import {
             pre.style.setProperty("color", "var(--c-code-light)");
           });
           article
-            .querySelectorAll<HTMLSpanElement>("span.block-code-token")
+            .querySelectorAll<HTMLSpanElement>(".block-code-token")
             .forEach((span) => {
               span.style.setProperty("color", "var(--c-code-light)");
             });
@@ -241,7 +241,7 @@ import {
             pre.style.setProperty("color", "var(--c-code-dark)");
           });
           article
-            .querySelectorAll<HTMLSpanElement>("span.block-code-token")
+            .querySelectorAll<HTMLSpanElement>(".block-code-token")
             .forEach((span) => {
               span.style.setProperty("color", "var(--c-code-dark)");
             });

src/styles/article.scss

@@ -44,7 +44,6 @@ article {
     background-color: var(--c-accent-2);
   }
   pre {
-    padding: v-size(4, "em") 0;
     border-radius: 10px;
     background-color: var(--c-code-light-bg);
     color: var(--c-code-light);
@@ -54,8 +53,9 @@ article {
       color: var(--c-code-dark);
     }
   }
-  .block-code-line:not(:empty) {
-    margin: 0 v-size(6, "em");
+  .block-code {
+    display: inline-block;
+    margin: v-size(4, "em") v-size(6, "em");
   }
   .block-code-token {
     color: var(--c-code-light);