style syntax highlighting

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

docs/reference/api-charRNN.md

@@ -14,7 +14,7 @@ description: >-
   You can train your own models [using this tutorial](/docs/training-lstm) or use [this set of pre trained models](https://github.com/ml5js/ml5-data-and-training/tree/master/models/lstm).
 ---
 
-### Example
+## Example
 
 ```javascript
 // Create the character level generator with a pre trained model
@@ -33,7 +33,7 @@ rnn.generate({ seed: "the meaning of pizza is" }, function(err, results) {
 
 [Here](https://github.com/ml5js/ml5-examples/blob/master/p5js/LSTM/LSTM_Text/sketch.js) is a complete example using the [p5.js](https://p5js.org) library.
 
-### Syntax
+## Syntax
 
 > ##### ml5.charRNN(**model**, **?callback**)
 >
@@ -42,7 +42,7 @@ rnn.generate({ seed: "the meaning of pizza is" }, function(err, results) {
 > - **model** - The path to the trained charRNN model.
 > - **callback** - Optional. A callback to be called once the model has loaded. If no callback is provided, it will return a promise that will be resolved once the model has loaded.
 
-### Properties
+## Properties
 
 ##### .ready
 

docs/reference/example.md

@@ -67,7 +67,25 @@ examples:
       </div>
 
     code: >-
+      const classifier = featureExtractor.classification(video, videoReady);
 
+      // Triggers when the video is ready
+      function videoReady() {
+        console.log("The video is ready!");
+      }
+
+      // Add a new image with a label
+      classifier.addImage(document.getElementById("dogA"), "dog");
+
+      // Retrain the network
+      classifier.train(function(lossValue) {
+        console.log("Loss is", lossValue);
+      });
+
+      // Get a prediction for that image
+      classifier.classify(document.getElementById("dogB"), function(err, result) {
+        console.log(result); // Should output 'dog'
+      });
       const video = document.getElementById("video");
 
       // Create a YOLO method

src/scss/abstracts/_variables.scss

@@ -11,7 +11,7 @@ $secondary-font-color: #4e4e4e !default;
 /// Brand font
 $primary-font-family: "HK Grotesk", sans-serif !default;
 $secondary-font-family: "HK Grotesk", "Arial", sans-serif !default;
-$monospace-font-family: monospace !default;
+$monospace-font-family: "Inconsolata", monospace !default;
 
 $font-size-1: 30px; // for model name on model page
 $font-size-2: 18px; // for tabs

src/scss/base/_font.scss

@@ -4,16 +4,28 @@
 
 @font-face {
   font-family: "HK Grotesk";
-  src: url('/fonts/HKGrotesk-Regular.otf') format("opentype");
+  src: url("/fonts/HKGrotesk-Regular.otf") format("opentype");
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: "HK Grotesk";
-  src: url('/fonts/HKGrotesk-Medium.otf') format("opentype");
+  src: url("/fonts/HKGrotesk-Medium.otf") format("opentype");
   font-weight: 500;
   font-style: normal;
 }
 
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/fonts/Inconsolata-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
 
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/fonts/Inconsolata-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}

src/scss/base/_syntaxHighlight.scss

@@ -0,0 +1,141 @@
+.gatsby-highlight,
+.hljs {
+  background-color: #f9f9f9 !important;
+}
+pre code {
+  font-family: $monospace-font-family !important;
+  background-color: #f9f9f9;
+  color: #444444 !important;
+  font-size: $font-size-paragraph !important;
+}
+
+pre .string,
+code .string,
+.hljs-string {
+  color: #8000ff !important;
+} /* string */
+
+pre .keyword,
+code .keyword,
+.hljs-keyword {
+  color: $blue !important;
+} /* keyword */
+
+pre .comment,
+code .comment,
+.hljs-comment {
+  color: #999999 !important;
+} /* comment */
+pre .function,
+code .function,
+.hljs-built_in {
+  color: #6db51e !important;
+} /* type */
+pre .number,
+code .number {
+  color: #ff0080 !important;
+} /* literal */
+pre .operator,
+code .operator {
+  color: #888888 !important;
+} /* punctuation */
+pre .tag,
+code .tag {
+  color: #008 !important;
+} /* plaintext */
+pre .doctype,
+code .doctype {
+  color: #22c0c4 !important;
+} /* decimal */
+
+pre .attr-value,
+code .attr-value {
+  color: #080 !important;
+}
+
+pre .attr-name,
+code .attr-name {
+  color: #606 !important;
+}
+
+.pln {
+  color: #000;
+}
+@media screen {
+  .str {
+    color: #080;
+  }
+  .kwd {
+    color: #008;
+  }
+  .com {
+    color: #800;
+  }
+  .typ {
+    color: #606;
+  }
+  .lit {
+    color: #066;
+  }
+  .pun,
+  .opn,
+  .clo {
+    color: #660;
+  }
+  .tag {
+    color: #008;
+  }
+  .atn {
+    color: #606;
+  }
+  .atv {
+    color: #080;
+  }
+  .dec,
+  .var {
+    color: #606;
+  }
+  .fun {
+    color: red;
+  }
+}
+@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;
+  }
+}
+pre.prettyprint {
+  padding: 2px;
+  border: 1px solid #888;
+}
+ol.linenums {
+  margin-top: 0;
+  margin-bottom: 0;
+}

src/scss/main.scss

@@ -2,7 +2,8 @@
 
 @import "./vendors/normalize.css";
 
-@import "./base/base", "./base/font", "./base/typography", "./base/prettify";
+@import "./base/base", "./base/font", "./base/typography",
+  "./base/syntaxHighlight";
 
 @import "./layout/Navbar", "./layout/Sidebar", "./layout/wrapper",
   "./layout/GridContainer", "./layout/Section", "./layout/Footer",