ux: update code block styling (#22761)

![export](https://github.com/user-attachments/assets/9a9df60b-22db-42b9-9b5d-3d2c7812bb0e)

.vscode/docker.code-snippets

@@ -39,6 +39,16 @@
     ],
     "description": "Insert a Hugo tabs block with two tabs and snippet stops for names and content",
   },
+  "Insert Hugo code block (no title)": {
+    "prefix": ["codeblock", "block"],
+    "body": ["```${1:json}", "$2", "```", ""],
+    "description": "Insert a Hugo code block with an optional title",
+  },
+  "Insert Hugo code block (with title)": {
+    "prefix": ["codeblock", "codettl", "block"],
+    "body": ["```${1:json} {title=\"$2\"}", "$3", "```", ""],
+    "description": "Insert a Hugo code block with an optional title",
+  },
   "Insert a Button": {
     "prefix": ["button"],
     "body": ["{{< button url=\"$1\" text=\"$2\" >}}"],

assets/css/utilities.css

@@ -144,12 +144,8 @@
     font-size: 0.875em;
     border: 1px solid;
     border-radius: 0.25rem; /* theme("spacing.1") fallback */
-    background: var(--color-white-main);
-    border-color: var(--color-gray-300);
-    .dark & {
-      background: var(--color-gray-200);
-      border-color: var(--color-gray-400);
-    }
+    border: none;
+    background: transparent;
     &::before,
     &::after {
       content: none !important;
@@ -185,7 +181,7 @@
   }
 
   .highlight {
-    @apply my-4 overflow-x-auto p-3;
+    @apply my-0 overflow-x-auto p-2;
 
     /* LineTableTD */
     .lntd {

hugo_stats.json

@@ -8,6 +8,7 @@
       "-mr-8",
       "-mt-0.5",
       "-mt-8",
+      "-top-10",
       "-top-16",
       "-v",
       "-z-10",
@@ -116,7 +117,6 @@
       "Using-the-GUI",
       "Using-the-MCP-Toolkit-Recommended",
       "VS-Code",
-      "Via-Docker-Desktop-Recommended",
       "Vue",
       "WSL-2-backend-Arm-Early-Access",
       "WSL-2-backend-x86_64",
@@ -155,9 +155,7 @@
       "bg-blue-500",
       "bg-gradient-to-br",
       "bg-gradient-to-r",
-      "bg-gray-00",
       "bg-gray-100",
-      "bg-gray-200",
       "bg-gray-400",
       "bg-gray-50",
       "bg-gray-700",
@@ -190,6 +188,7 @@
       "border-white",
       "bottom-0",
       "build-push-action",
+      "button",
       "card",
       "card-content",
       "card-description",
@@ -198,32 +197,29 @@
       "card-img",
       "card-link",
       "card-title",
+      "chip",
       "chroma",
       "cls-1",
       "cls-2",
       "col-start-2",
       "containerd-image-store",
       "cursor-pointer",
-      "dark:bg-amber-300",
+      "dark:bg-amber-400",
       "dark:bg-background-dark",
       "dark:bg-background-toc",
       "dark:bg-blue",
-      "dark:bg-blue-300",
       "dark:bg-blue-400",
       "dark:bg-blue-500",
       "dark:bg-blue-800",
       "dark:bg-gray-300",
-      "dark:bg-gray-400",
       "dark:bg-gray-500",
       "dark:bg-gray-800",
       "dark:bg-gray-900",
       "dark:bg-gray-950",
-      "dark:bg-green-300",
       "dark:bg-green-700",
       "dark:bg-green-dark-400",
       "dark:bg-navbar-bg-dark",
-      "dark:bg-red-300",
-      "dark:bg-violet-300",
+      "dark:bg-red-400",
       "dark:bg-violet-400",
       "dark:block",
       "dark:border-b-blue-600",
@@ -242,10 +238,11 @@
       "dark:hover:bg-blue-400",
       "dark:hover:bg-blue-500",
       "dark:hover:bg-blue-700",
-      "dark:hover:bg-gray-500",
+      "dark:hover:bg-gray-600",
       "dark:hover:bg-gray-800",
       "dark:hover:bg-gray-900",
       "dark:hover:text-blue",
+      "dark:outline-gray-800",
       "dark:prose-invert",
       "dark:ring-3-blue-dark-400",
       "dark:ring-3-gray-dark-400",
@@ -259,7 +256,6 @@
       "dark:text-gray-300",
       "dark:text-gray-400",
       "dark:text-gray-500",
-      "dark:text-gray-900",
       "dark:text-magenta-dark",
       "dark:text-white",
       "dark:to-blue-400",
@@ -284,6 +280,7 @@
       "focus:ring-3-blue-light",
       "font-bold",
       "font-medium",
+      "font-normal",
       "font-semibold",
       "footnote-backref",
       "footnote-ref",
@@ -295,6 +292,7 @@
       "gap-10",
       "gap-12",
       "gap-2",
+      "gap-2.5",
       "gap-20",
       "gap-3",
       "gap-4",
@@ -331,7 +329,6 @@
       "hover:border-white/20",
       "hover:dark:bg-blue-500",
       "hover:dark:bg-gray-300",
-      "hover:dark:bg-gray-700",
       "hover:dark:bg-gray-800",
       "hover:dark:text-blue-400",
       "hover:dark:text-blue-700",
@@ -375,7 +372,6 @@
       "lntable",
       "lntd",
       "m-2",
-      "m-4",
       "macOS",
       "max-h-full",
       "max-w-4xl",
@@ -386,8 +382,8 @@
       "max-w-none",
       "max-w-xl",
       "mb-1",
+      "mb-1.5",
       "mb-2",
-      "mb-3",
       "mb-4",
       "mb-6",
       "mb-8",
@@ -406,6 +402,7 @@
       "md:text-sm",
       "md:top-16",
       "md:w-[300px]",
+      "md:w-[320px]",
       "md:z-auto",
       "min-h-screen",
       "min-w-0",
@@ -416,6 +413,7 @@
       "ml-4",
       "ml-auto",
       "mt-1",
+      "mt-1.5",
       "mt-2",
       "mt-20",
       "mt-4",
@@ -425,7 +423,10 @@
       "my-0",
       "my-4",
       "my-6",
+      "navbar-entry-background-current",
+      "navbar-entry-margin",
       "navbar-font",
+      "navbar-group",
       "navbar-group-font-title",
       "no-underline",
       "no-wrap",
@@ -436,7 +437,11 @@
       "origin-bottom-right",
       "origin-top-right",
       "ot-sdk-show-settings",
+      "outline",
+      "outline-1",
+      "outline-gray-200",
       "outline-hidden",
+      "outline-offset-[-1px]",
       "overflow-clip",
       "overflow-hidden",
       "overflow-x-auto",
@@ -444,6 +449,7 @@
       "overflow-y-auto",
       "p-1",
       "p-2",
+      "p-3",
       "p-4",
       "p-6",
       "p-8",
@@ -467,11 +473,11 @@
       "pt-10",
       "pt-2",
       "pt-4",
-      "pt-5",
       "px-1",
       "px-2",
       "px-4",
       "px-6",
+      "py-0.5",
       "py-1",
       "py-2",
       "py-20",
@@ -479,16 +485,16 @@
       "py-8",
       "relative",
       "right-0",
-      "right-3",
+      "right-2",
       "right-8",
       "ring-3-2",
       "ring-3-[1.5px]",
       "ring-3-blue-light-400",
       "ring-3-gray-light-200",
       "rotate-45",
+      "rounded",
       "rounded-full",
       "rounded-sm",
-      "rounded-sm-b-lg",
       "scale-50",
       "scale-75",
       "scroll-mt-2",
@@ -526,11 +532,11 @@
       "text-blue-light",
       "text-divider-light",
       "text-gray",
-      "text-gray-100",
       "text-gray-200",
+      "text-gray-300",
       "text-gray-400",
+      "text-gray-500",
       "text-gray-600",
-      "text-gray-800",
       "text-left",
       "text-lg",
       "text-magenta-light",
@@ -543,8 +549,8 @@
       "to-blue-500",
       "toc",
       "top-0",
+      "top-1",
       "top-16",
-      "top-3",
       "top-6",
       "top-full",
       "transition",

layouts/_default/_markup/render-codeblock.html

@@ -1,33 +1,47 @@
-<div data-pagefind-ignore class="scroll-mt-2" x-data x-ref="root">
+<div
+  data-pagefind-ignore
+  x-data
+  x-ref="root"
+  class="group mt-2 mb-4 flex w-full scroll-mt-2 flex-col items-start gap-4 rounded bg-gray-50 p-2 outline outline-1 outline-offset-[-1px] outline-gray-200 dark:bg-gray-900 dark:outline-gray-800"
+>
   {{ with .Attributes.title }}
-    <div
-      class="mb-0 rounded-sm bg-gray-100 p-2 text-sm text-gray-900 dark:bg-gray-900 dark:text-gray-200"
-    >
-      {{ . }}
+    <div class="flex w-full items-center gap-2">
+      <div
+        class="flex items-center gap-2.5 rounded bg-gray-100 px-2 py-0.5 dark:bg-gray-800"
+      >
+        <div class="font-normal text-gray-500 dark:text-gray-200">
+          {{ . }}
+        </div>
+      </div>
     </div>
   {{ end }}
-  <div class="group relative">
-    <!-- copy button -->
-    <button
-      x-data="{ code: '{{ encoding.Base64Encode .Inner }}', copying: false }"
-      class="absolute top-3 right-3 z-10 text-gray-200 dark:text-gray-500"
-      title="copy"
-      @click="window.navigator.clipboard.writeText(atob(code).replaceAll(/^[\$>]\s+/gm, ''));
-      copying = true;
-      setTimeout(() => copying = false, 2000);"
-    >
-      <span :class="{ 'group-hover:block' : !copying }" class="icon-svg hidden"
-        >{{ partialCached "icon" "content_copy" "content_copy" }}</span
-      >
-      <span :class="{ 'group-hover:block' : copying }" class="icon-svg hidden"
-        >{{ partialCached "icon" "check_circle" "check_circle" }}</span
-      >
-    </button>
+  <div class="relative w-full">
     {{ $lang := .Type | default "text" }}
     {{ $result := transform.Highlight .Inner
       $lang .Options
     }}
-    <div class="syntax-light dark:syntax-dark not-prose">
+    <div class="syntax-light dark:syntax-dark not-prose w-full">
+      <button
+        x-data="{ code: '{{ encoding.Base64Encode .Inner }}', copying: false }"
+        class="{{ if .Attributes.title }}
+          -top-10
+        {{ else }}
+          top-1
+        {{ end }} absolute right-2 z-10 text-gray-300 dark:text-gray-500"
+        title="copy"
+        @click="window.navigator.clipboard.writeText(atob(code).replaceAll(/^[\$>]\s+/gm, ''));
+      copying = true;
+      setTimeout(() => copying = false, 2000);"
+      >
+        <span
+          :class="{ 'group-hover:block' : !copying }"
+          class="icon-svg hidden"
+          >{{ partialCached "icon" "content_copy" "content_copy" }}</span
+        >
+        <span :class="{ 'group-hover:block' : copying }" class="icon-svg hidden"
+          >{{ partialCached "icon" "check_circle" "check_circle" }}</span
+        >
+      </button>
       {{ with .Attributes.collapse }}
         <div
           x-data="{ collapse: true }"
@@ -38,10 +52,7 @@
             x-show="collapse"
             class="absolute z-10 flex h-32 w-full flex-col-reverse items-center overflow-clip pb-4"
           >
-            <button
-              @click="collapse = false"
-              class="bg-blue flex items-center rounded-full px-2 text-sm text-white dark:bg-blue-500"
-            >
+            <button @click="collapse = false" class="chip">
               <span>Show more</span>
               <span class="icon-svg"
                 >{{ partialCached "icon" "arrow_drop_down" "arrow_drop_down" }}</span