From d97b45d82a8000e36cc0028188286ce5f093a874 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 23 Feb 2021 16:49:19 +0200
Subject: [PATCH] fix(docs-infra): make inline code stand out more (#40944)

This commit improves the styling of inline code blocks to make them
stand out more.

Before: ![code formatting before][1]
After: ![code formatting after][2]

This change has been extracted from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108554295-8e521080-72fc-11eb-94e8-09246ae334c8.png
[2]: https://user-images.githubusercontent.com/8604205/108553733-c9077900-72fb-11eb-8001-1f0baf8b95bc.png

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
---
 aio/src/styles/2-modules/_code.scss | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index b5e21c1155..0f2a5ef758 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -102,6 +102,10 @@ aio-code {
     align-items: center;
 
     code {
+      a {
+        color: inherit;
+      }
+
       span {
         @include line-height(24);
       }
@@ -159,12 +163,19 @@ aio-code {
 .sidenav-content {
   code {
     a {
-      color: inherit;
+      color: $darkblue;
       font-size: inherit;
       font-weight: inherit;
     }
   }
 
+  :not(h1, h2, h3, h4, h5, h6, pre) > code {
+    background-color: rgba($lightgray, 0.5);
+    border-radius: 4px;
+    color: $deepgray;
+    padding: 4px;
+  }
+
   .code-anchor {
     cursor: pointer;
     text-decoration: none;