message: refactor(docs-infra): scope code example styles to the `<aio-code>` element
  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
diff: @@ -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. */
  