refactor(docs-infra): scope code example styles to the <aio-code> element (#40704)

This commit ensures that all styles for the code examples (which are
defined in `_code.scss`) only apply to elements inside an `<aio-code>`
element. This will prevent the styles accidentally taking effect on a
different part of the app.

PR Close #40704

aio/src/styles/2-modules/_code.scss

@@ -27,7 +27,7 @@ code-example {
   }
 
   &.no-box {
-    pre {
+    pre.prettyprint {
       margin: 0;
     }
 
@@ -93,7 +93,8 @@ code-tabs.avoidFile mat-tab-body {
 }
 
 aio-code {
-  pre {
+  pre.prettyprint {
+    position: relative;
     display: flex;
     min-height: 32px;
     margin: 16px 24px;
@@ -104,15 +105,24 @@ aio-code {
       span {
         @include line-height(24);
       }
-    }
-  }
-}
 
+      ol.linenums {
+        margin: 0;
+        font-family: $main-font;
+        color: #B3B6B7;
+
+        li {
+          margin: 0;
+          font-family: $code-font;
+          font-size: 90%;
+          @include line-height(24);
+        }
+      }
 
       .code-missing {
         color: $darkred;
       }
-
+    }
 
     .copy-button {
       position: absolute;
@@ -125,12 +135,13 @@ aio-code {
       background-color: transparent;
       border: none;
       cursor: pointer;
+
       &:hover {
         color: $mediumgray;
       }
     }
 
-.lang-sh, .lang-bash {
+    &.lang-sh, &.lang-bash {
       .copy-button {
         color: $mediumgray;
 
@@ -139,6 +150,8 @@ aio-code {
         }
       }
     }
+  }
+}
 
 .sidenav-content {
   code {
@@ -152,24 +165,6 @@ aio-code {
 
 /* PRETTY PRINTING STYLES for prettify.js. */
 
-.prettyprint {
-  position: relative;
-}
-
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums {
-  margin: 0;
-  font-family: $main-font;
-  color: #B3B6B7;
-
-  li {
-    margin: 0;
-    font-family: $code-font;
-    font-size: 90%;
-    @include line-height(24);
-  }
-}
-
 /* The following class|color styles are derived from https://github.com/google/code-prettify/blob/master/src/prettify.css*/
 
 /* SPAN elements with the classes below are added by prettyprint. */