diff --git a/public/docs/styleguide.jade b/public/docs/styleguide.jade
index b707597884..361b6d210d 100644
--- a/public/docs/styleguide.jade
+++ b/public/docs/styleguide.jade
@@ -19,6 +19,31 @@
         pre.prettyprint.linenums:4
           var title = "This starts on line four";
 
+  .l-sub-section
+    h3 Code Highlighting
+    p.
+      There are three types of highlights avialable
+      <strong>Outlined</strong>, <strong>Pink</strong>, and
+      <strong>Black</strong>. You can see examples below and
+      the class names needed for each type.
+
+    pre.prettyprint.linenums
+      code.
+        // Pink Background Version
+        // class="pnk"
+        var elephants = "The <span class="pnk">pink</span> elephants were marching...";
+
+
+        // Black Background Version
+        // class="blk"
+        var night = "The night was pitch <span class="blk">black</span>.";
+
+        // Outlined Version
+        // class="otl"
+        var match = "The <span class="otl">bird</span> ate <span class="otl">bird</span> seed near the <span class="otl">bird</span> bath ";
+
+
+
 .l-main-section
   h2 Alerts
 
diff --git a/public/resources/css/module/_code.scss b/public/resources/css/module/_code.scss
index 242155595f..610af6e57d 100644
--- a/public/resources/css/module/_code.scss
+++ b/public/resources/css/module/_code.scss
@@ -81,6 +81,21 @@
   *
   */
 
+  .pnk,
+  .blk {
+    border-radius: 2px;
+    padding: 2px 4px;
+  }
+  .pnk {
+    background: $squid;
+    color: $snow;
+  }
+  .blk {
+    background: $coal;
+  }
+  .otl {
+    outline: 1px solid rgba(snow, .56);
+  }
   .kwd {
     color: $mist;
   }