docs(code): highlight inline code elements #232 (#234)

Author: amcdnl

src/highlightjs/solarized-light.css

@@ -8,6 +8,7 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
+  $exportBackgroundOpacity: if($is-dark-theme, 0.06, 0.03);
 
   .docs-api-method-name-cell {
     color: mat-color($primary, 800);
@@ -23,4 +24,11 @@
   .docs-api-h1 {
     display: none !important;
   }
+
+  .docs-api-class-name,
+  .docs-api-module-import,
+  .docs-api-class-selector-name,
+  .docs-api-class-export-name {
+    background: rgba(mat-color($foreground, secondary-text), $exportBackgroundOpacity);
+  }
 }

src/styles/_api-theme.scss

@@ -40,6 +40,11 @@
   font-size: 12px;
 }
 
+.docs-api-class-name,
+.docs-api-module-import {
+  display: inline;
+}
+
 .docs-api-method-name-cell {
   font-weight: 700;
   font-size: 18px;
@@ -55,3 +60,10 @@
   // Size corresponding to "caption"-style text in the spec.
   font-size: 12px;
 }
+
+.docs-api-class-name,
+.docs-api-module-import,
+.docs-api-class-selector-name,
+.docs-api-class-export-name {
+  padding: 3px;
+}

src/styles/_api.scss

@@ -16,6 +16,18 @@
   .docs-markdown-pre {
     background: rgba(mat-color($foreground, secondary-text), .01);
     border: .5px solid rgba(mat-color($foreground, secondary-text), .03);
+
+    .docs-markdown-code {
+      background: transparent;
+    }
   }
-}
 
+  .docs-markdown-code {
+    @if $is-dark-theme {
+      background: rgba(mat-color($foreground, secondary-text), .06);
+    }
+    @else {
+      background: rgba(mat-color($foreground, secondary-text), .03);
+    }
+  }
+}

src/styles/_markdown-theme.scss

@@ -34,6 +34,14 @@
   margin: 16px auto;
   display: block;
   padding: 20px;
+
+  .docs-markdown-code {
+    padding: 0;
+  }
+}
+
+.docs-markdown-code {
+  padding: 3px;
 }
 
 code, pre {