hugo: show background color on all inline

code blocks * Removed the code that only adds a background to inline code when inside p or list * Give code element a transparent background when inside of pre element. Test: * Add inline code to some steps and see if they have a background color: /examples/shortcodes/step/ * Check all other uses for code, not only inline, e.g.: * /examples/basic/code-block/ * /examples/shortcodes/code-tabs/ Fixes cue-lang/cue#3003 and cue-lang/cue#3498 Signed-off-by: Anne van Gorkom <[email protected]>
cue-lang · Dec 18, 2024 · faae784 · faae784
1 parent 3860c64
commit faae784
Showing 1 changed file with 9 additions and 11 deletions.
diff --git a/hugo/assets/scss/base/base.scss b/hugo/assets/scss/base/base.scss
@@ -336,22 +336,16 @@ pre {
 }
 
 code {
+    --pre-background-color: #{ $c-grey-blue };
+
+    background-color: var(--pre-background-color);
+    border-radius: 2px;
     font-size: inherit;
     font-style: normal;
     font-weight: inherit;
     line-height: inherit;
+    padding: 0 4px;
     white-space: pre;
-
-    ul &,
-    ol &,
-    dl &,
-    p & {
-        --pre-background-color: #{ $c-grey-blue };
-
-        background-color: var(--pre-background-color);
-        border-radius: 2px;
-        padding: 0 4px;
-    }
 }
 
 pre {
@@ -364,6 +358,10 @@ pre {
     max-width: 100%;
     overflow-x: auto;
     padding: 0.875rem 1rem;
+
+    code {
+        --pre-background-color: transparent;
+    }
 }
 
 audio,