fix: codeblock line nums (#22866)

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 {

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 {

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 {

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);
 }

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;