From 5d9bf839f11b3b3157e1898d2acd15c6212aee51 Mon Sep 17 00:00:00 2001
From: Arthur <arthur.flageul@docker.com>
Date: Wed, 18 Jun 2025 15:38:16 +0200
Subject: [PATCH] fix: codeblock line nums (#22866)

---
 assets/css/global.css       | 12 ------------
 assets/css/syntax-dark.css  |  9 ++-------
 assets/css/syntax-light.css |  7 +------
 assets/css/theme.css        |  3 +++
 assets/css/utilities.css    |  5 ++++-
 5 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/assets/css/global.css b/assets/css/global.css
index bd7d62c1cb..90887417a2 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -39,18 +39,6 @@ input[type="search"]::-moz-search-cancel-button {
 input[type="search"]::-ms-clear {
   display: none;
 }
-.prose {
-  code {
-    @apply !bg-gray-100;
-  }
-  & .highlight,
-  & :not(pre) > code {
-    .dark & {
-      background: var(--color-gray-900) !important;
-      border-color: var(--color-gray-700) !important;
-    }
-  }
-}
 
 .prose {
   li {
diff --git a/assets/css/syntax-dark.css b/assets/css/syntax-dark.css
index 9228742d67..e66c18186f 100644
--- a/assets/css/syntax-dark.css
+++ b/assets/css/syntax-dark.css
@@ -14,12 +14,7 @@
   /* LineHighlight */
   .hl {
     min-width: fit-content;
-    background-color: var(--color-gray-700);
-  }
-  .lntd:first-child .hl,
-  & > .chroma > code > .hl {
-    margin-left: -4px;
-    border-left: 4px solid var(--color-gray-900);
+    background-color: var(--color-gray-800);
   }
   /* LineNumbersTable */
   .lnt {
@@ -27,7 +22,7 @@
     user-select: none;
     margin-right: 0.4em;
     padding: 0 0.4em 0 0.4em;
-    color: var(--color-gray-900);
+    color: var(--color-gray-300);
   }
   /* LineNumbers */
   .ln {
diff --git a/assets/css/syntax-light.css b/assets/css/syntax-light.css
index c43ffa79ca..e9c3151d14 100644
--- a/assets/css/syntax-light.css
+++ b/assets/css/syntax-light.css
@@ -14,12 +14,7 @@
   /* LineHighlight */
   .hl {
     min-width: fit-content;
-    background-color: var(--color-blue-100);
-  }
-  .lntd:first-child .hl,
-  & > .chroma > code > .hl {
-    margin-left: -4px;
-    border-left: 4px solid var(--color-blue-300);
+    background-color: var(--color-gray-100);
   }
   /* LineNumbersTable */
   .lnt {
diff --git a/assets/css/theme.css b/assets/css/theme.css
index c47a582eec..c4014da6e1 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -200,4 +200,7 @@
   --color-yellow-hover: rgba(235, 156, 0, 0.12);
   --color-yellow-outlinedborder: rgba(235, 156, 0, 0.56);
   --color-yellow-selected: rgba(235, 156, 0, 0.16);
+
+  --tw-prose-code-bg: var(--color-gray-100);
+  --tw-prose-code-bg-dark: var(--color-gray-800);
 }
diff --git a/assets/css/utilities.css b/assets/css/utilities.css
index 90931e6669..d3cbc10a73 100644
--- a/assets/css/utilities.css
+++ b/assets/css/utilities.css
@@ -153,7 +153,10 @@
   }
 
   :not(pre) > code {
-    background: var(--color-gray-200);
+    background: var(--tw-prose-code-bg);
+    .dark & {
+      background: var(--tw-prose-code-bg-dark);
+    }
     display: inline-block;
     margin: 0;
     font-weight: 400;