fix(aio): re-color code pretty print

closes #17246

aio/src/styles/2-modules/_api-list.scss

@@ -285,11 +285,6 @@ p {
   cursor: pointer;
   text-decoration: none;
 
-  // Override highlight.js
-  .kwd {
-    color: #1E88E5 !important;
-  }
-
   &:hover {
     text-decoration: underline;
   }
@@ -325,4 +320,4 @@ p {
     position: relative;
     font-size: 11px;
   }
-}
+}

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

@@ -73,30 +73,16 @@ aio-code pre {
     white-space: pre-wrap;
     align-items: center;
 
-    code span, code ol li {
+    code span {
       line-height: 24px;
     }
 }
 
-code ol {
-  margin: 0;
-  font-family: $main-font;
-  color: $lightgray;
-
-  li {
-    margin: 0;
-    font-family: $code-font;
-    font-size: 90%;
-  }
-}
 
 .code-missing {
   color: $darkred;
 }
 
-.prettyprint {
-  position: relative;
-}
 
 .copy-button {
   display: inline-block;
@@ -125,102 +111,6 @@ code ol {
   transform: none;
 }
 
-/* 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;
-  }
-
-/* SHELL / TERMINAL CODE BLOCKS */
-
-code-example.code-shell, code-example[language=sh], code-example[language=bash] {
-  & .pnk, .blk,.pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
-    color: $codegreen;
-  }
-}
-
-/* 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;
-  }
-}
 
 // REMOVE RIPPLE EFFECT FROM MATERIAL TABS
 code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-body-active, code-tabs md-tab-group *.mat-tab-body-content, code-tabs md-tab-group *.mat-tab-body-content {
@@ -235,3 +125,63 @@ code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-bo
   color: inherit;
   font-size: inherit;
 }
+
+/* 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%;
+    line-height: 24px;
+  }
+}
+
+/* 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. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #800 }  /* string content */
+  .kwd { color: #00f }  /* a keyword */
+  .com { color: #060 }  /* a comment */
+  .typ { color: red }  /* a type name */
+  .lit { color: #08c }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #660 }
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #800 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* SHELL / TERMINAL CODE BLOCKS */
+
+code-example.code-shell, code-example[language=sh], code-example[language=bash] {
+  & .pnk, .blk,.pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
+    color: $codegreen;
+  }
+}