diff --git a/app/assets/stylesheets/color_definitions.scss b/app/assets/stylesheets/color_definitions.scss
index fe0dbe1dfeb..9323390bcc0 100644
--- a/app/assets/stylesheets/color_definitions.scss
+++ b/app/assets/stylesheets/color_definitions.scss
@@ -113,6 +113,7 @@
   --hljs-attribute: #{$hljs-attribute};
   --hljs-addition: #{$hljs-addition};
   --hljs-bg: #{$hljs-bg};
+  --inline-code-bg: #{$inline-code-bg};
   --hljs-comment: #{$hljs-comment};
   --hljs-deletion: #{$hljs-deletion};
   --hljs-keyword: #{$hljs-keyword};
diff --git a/app/assets/stylesheets/common/base/code_highlighting.scss b/app/assets/stylesheets/common/base/code_highlighting.scss
index 883cbfdc494..7078af2b4a1 100644
--- a/app/assets/stylesheets/common/base/code_highlighting.scss
+++ b/app/assets/stylesheets/common/base/code_highlighting.scss
@@ -1,12 +1,14 @@
-/* originally based on github.com style (c) Vasily Polovnyov <vast@whiteants.net> */
-
 p > code,
 li > code,
-pre > code,
 strong > code,
 em > code {
-  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono",
-    Menlo, Monaco, Consolas, monospace;
+  padding: 2px 4px;
+  background: var(--inline-code-bg);
+  white-space: pre-wrap;
+  color: var(--primary);
+}
+
+code {
   color: var(--primary-very-high);
   background: var(--hljs-bg);
   border-radius: var(--d-button-border-radius);
@@ -14,11 +16,10 @@ em > code {
   line-height: calc((13 + 4) / 13);
 }
 
-.hljs {
+pre > code {
   display: block;
   padding: 12px;
-  color: var(--primary-very-high);
-  background-color: var(--hljs-bg);
+  max-height: 500px;
 }
 
 .hljs-comment,
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index aa73fec8ca3..45eba080f96 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -920,15 +920,6 @@ aside.quote {
 pre {
   max-height: 2000px;
 
-  code {
-    word-wrap: normal;
-    display: block;
-    padding: 0.5em;
-    color: var(--primary);
-    background: var(--blend-primary-secondary-5);
-    max-height: 500px;
-  }
-
   .bidi-warning,
   .bidi-warning span {
     font-style: normal;
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index d7d5700ba28..bb3f8269662 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -12,9 +12,8 @@
   --d-button-border-radius: 2px;
   --d-input-border-radius: 2px;
   --d-content-background: initial;
-  --d-font-family--monospace: Consolas, Menlo, Monaco, "Lucida Console",
-    "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
-    "Courier New", monospace;
+  --d-font-family--monospace: ui-monospace, "Cascadia Mono", "Segoe UI Mono",
+    "Liberation Mono", Menlo, Monaco, Consolas, monospace;
   --d-button-transition: none;
 }
 
diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss
index 0fc330bed4c..93b706aabe7 100644
--- a/app/assets/stylesheets/common/foundation/color_transformations.scss
+++ b/app/assets/stylesheets/common/foundation/color_transformations.scss
@@ -166,6 +166,7 @@ $hljs-attr: dark-light-choose(#015692, #88aece) !default;
 $hljs-attribute: dark-light-choose(#803378, #c59bc1) !default;
 $hljs-addition: dark-light-choose(#2f6f44, #76c490) !default;
 $hljs-bg: dark-light-choose($primary-50, rgba(0, 0, 0, 0.25)) !default;
+$inline-code-bg: dark-light-choose($primary-100, rgba(0, 0, 0, 0.35)) !default;
 $hljs-comment: $primary-500 !default;
 $hljs-deletion: dark-light-choose(#c02d2e, #de7176) !default;
 $hljs-keyword: dark-light-choose(#015692, #88aece) !default;