From 4f6f51acb86e8c2adab8a4fe12b749df6ae86c44 Mon Sep 17 00:00:00 2001
From: Arthur <arthur.flageul@docker.com>
Date: Wed, 30 Jul 2025 16:13:04 +0200
Subject: [PATCH] fix: better support for unrecognized languages

---
 assets/css/global.css    |  4 +++
 assets/css/utilities.css | 53 ++++++++++++++--------------------------
 2 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/assets/css/global.css b/assets/css/global.css
index 8ff730389ba8..9e6aaae28eb8 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -92,3 +92,7 @@ input[type="search"]::-ms-clear {
     color: var(--color-blue-400);
   }
 }
+
+code{
+  font-size:0.9em;
+}
diff --git a/assets/css/utilities.css b/assets/css/utilities.css
index 9b2ec25df0fd..4ffcddcbf887 100644
--- a/assets/css/utilities.css
+++ b/assets/css/utilities.css
@@ -138,50 +138,35 @@
 }
 
 @utility prose {
-  .highlight,
-  :not(pre) > code {
-    font-size: 0.875em;
-    border: 1px solid;
-    border-radius: 0.25rem; /* theme("spacing.1") fallback */
-    border: none;
-    background: transparent;
-    &::before,
-    &::after {
-      content: none !important;
-    }
-  }
-
-  :not(pre) > code {
-    background: var(--tw-prose-code-bg);
-    .dark & {
-      background: var(--tw-prose-code-bg-dark);
-    }
-    display: inline-block;
-    margin: 0;
-    font-weight: 400;
-    overflow-wrap: anywhere;
-    padding: 0 4px;
-  }
-
   table:not(.lntable) code {
     overflow-wrap: unset;
     white-space: nowrap;
   }
 
-  /* Indented code blocks */
-  pre:not(.chroma) {
-    @apply my-4 overflow-x-auto p-3;
+  /* code in `inline code` style */
+  :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)),
+  a>code {
     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);
+    font-weight: 400 !important;
+    border: 1px solid !important;
+    border-radius: 0.25rem;
+    border: none !important;
+    padding: 4px !important;
+    background: var(--tw-prose-code-bg) !important;
     .dark & {
-      background: var(--color-gray-200);
-      border-color: var(--color-gray-400);
+      background: var(--tw-prose-code-bg-dark) !important;
+    }
+    &::before,
+    &::after {
+      content: none !important;
     }
   }
 
+  /* code blocks with unrecognized languages*/
+  pre:not(.chroma) {
+    @apply overflow-x-auto p-3;
+  }
+
   .highlight {
     @apply my-0 overflow-x-auto p-2;