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

code-example,
code-tabs md-tab-body {
    background-color: $backgroundgray;
    border: 0.5px solid $lightgray;
    border-radius: 5px;
    color: $darkgray;
    display: block;
    padding: 8px;
    margin: 16px auto;
}

code-example header {
  background-color: $mediumgray;
  border: 0.5px solid $mediumgray;
  border-radius: 5px 5px 0 0;
  color: $offwhite;
  font-size: 16px;
  padding: 10px;
  margin: -10px;
}

code-example.is-anti-pattern header {
  border: 2px solid $anti-pattern;
  background: $anti-pattern;
}

code-example.is-anti-pattern,
code-tabs.is-anti-pattern md-tab-body {
  border: 0.5px solid $anti-pattern;
}

code-tabs div .mat-tab-body-content {
  height: auto;
}

code-tabs .mat-tab-body-wrapper md-tab-body .mat-tab-body {
  overflow-y: hidden;
}

code-tabs mat-tab-body-content .fadeIn {
  animation: opacity 2s ease-in;
}

aio-code pre {
    display: flex;
    padding: 0;
    white-space: pre-wrap;
}

code ol {
  font-family: $main-font;
  color: $lightgray;
  
  li {
    margin: 0;
    font-family: $code-font;
    font-size: 90%;
  }
}

.prettyprint {
  position: relative;
}

.copy-button {
  top: -16px;
  right: -16px;
  color: $lightgray;
  background-color: transparent;
  border: none;
  &:hover {
    color: $mediumgray;
  }
}

.code-tab-group div.mat-tab-body-content {
  height: auto;
}

$blue-grey-50: #ECEFF1;
$blue-grey-100: #CFD8DC;
$blue-grey-200: #B0BEC5;
$blue-grey-300: #90A4AE;
$blue-grey-400: #78909C;
$blue-grey-500: #607D8B;
$blue-grey-600: #546E7A;
$blue-grey-700: #455A64;
$blue-grey-800: #37474F;
$blue-grey-900: #263238;

$white: #FFFFFF;

  /*
  * Screen Colors
  *
  */

  .pnk,
  .blk {
    border-radius: 4px;
    padding: 2px 4px;
  }
  .pnk {
    background: $blue-grey-50;
    color: $blue-grey-900;
  }
  .blk {
    background: $blue-grey-900;
  }
  .otl {
    outline: 1px solid rgba($blue-grey-700, .56);
  }
  .kwd {
    color: $darkgray;
  }
  .typ,
  .tag {
    color: $darkred;
  }
  .str,
  .atv {
    color: $blue;
  }
  .atn {
    color: $blue;
  }
  .com {
    color: $mediumgray;
  }
  .lit {
    color: $blue;
  }
  .pun {
    color: $blue-grey-700;
  }
  .pln {
    color: $green-800;
  }
  .dec {
    color: $blue;
  }


  /*
  * Print Colors
  *
  */

  @media print {
    border: none;
    box-shadow: none;

    ol {
      background: $white;
    }

    .kwd {
      color: $darkgray;
    }
    .typ,
    .tag {
      color: $darkred;
    }
    .str,
    .atv {
      color: $blue;
    }
    .atn {
      color: $blue;
    }
    .com {
      color: $mediumgray;
    }
    .lit {
      color: $blue;
    }
    .pun {
      color: $blue-grey-700;
    }
    .pln {
      color: $green-800;
    }
    .dec {
      color: $blue;
    }
  }