Working syntax highlighting

gatsby-browser.js

@@ -1 +1,2 @@
 import "./src/styles/styles.scss";
+import "prismjs/themes/prism-tomorrow.css";

gatsby-config.js

@@ -31,6 +31,23 @@ module.exports = {
               maxWidth: 800,
             },
           },
+          {
+            resolve: `gatsby-remark-prismjs`,
+            options: {
+              classPrefix: "highlight-",
+              inlineCodeMarker: null,
+              aliases: {},
+              showLineNumbers: false,
+              noInlineHighlight: false,
+              languageExtensions: [],
+              prompt: {
+                user: "root",
+                host: "localhost",
+                global: false,
+              },
+              escapeEntities: {},
+            },
+          },
         ],
       },
     }

package-lock.json

@@ -4726,6 +4726,17 @@
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw=="
     },
+    "clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -6076,6 +6087,12 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "optional": true
+    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -9086,6 +9103,39 @@
         }
       }
     },
+    "gatsby-remark-prismjs": {
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.5.14.tgz",
+      "integrity": "sha512-dyZj28eIztZSHS+jdJOtX7uEMJiWhsKsgLPkn/pJS7QQOYRklQSORE7sIkU9n2e+ILn8fASUo6Yosvn8j57miQ==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "parse-numeric-range": "^0.0.2",
+        "unist-util-visit": "^1.4.1"
+      },
+      "dependencies": {
+        "unist-util-is": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
+          "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="
+        },
+        "unist-util-visit": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+          "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+          "requires": {
+            "unist-util-visit-parents": "^2.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+          "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+          "requires": {
+            "unist-util-is": "^3.0.0"
+          }
+        }
+      }
+    },
     "gatsby-source-filesystem": {
       "version": "2.3.30",
       "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.3.30.tgz",
@@ -9166,13 +9216,13 @@
       }
     },
     "gatsby-transformer-remark": {
-      "version": "2.8.35",
+      "version": "2.8.36",
-      "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-2.8.35.tgz",
+      "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-2.8.36.tgz",
-      "integrity": "sha512-dIzl5OKgH3eeH8mJZ45GxgUVbClGp9VulGVVhJAnG7H5v3AMMey8JGVoUyECbAd42HH+2YoebYrvsEKExYeHFA==",
+      "integrity": "sha512-TZmQDRQQ3t2NsvgvwBciUhSZyikAHTSSbczanBHS1IyadL3VOL6t4+EKE5aCLwFKFnFj3SO2ivV6w8ABpWs3jA==",
       "requires": {
         "@babel/runtime": "^7.11.2",
         "bluebird": "^3.7.2",
-        "gatsby-core-utils": "^1.3.20",
+        "gatsby-core-utils": "^1.3.21",
         "gray-matter": "^4.0.2",
         "hast-util-raw": "^4.0.0",
         "hast-util-to-html": "^4.0.1",
@@ -9185,7 +9235,7 @@
         "remark-retext": "^3.1.3",
         "remark-stringify": "6.0.4",
         "retext-english": "^3.0.4",
-        "sanitize-html": "^1.27.0",
+        "sanitize-html": "^1.27.5",
         "underscore.string": "^3.3.5",
         "unified": "^6.2.0",
         "unist-util-remove-position": "^1.1.4",
@@ -9193,6 +9243,20 @@
         "unist-util-visit": "^1.4.1"
       },
       "dependencies": {
+        "gatsby-core-utils": {
+          "version": "1.3.21",
+          "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-1.3.21.tgz",
+          "integrity": "sha512-oaHdrfnip0u1pMVkO5O+R6YxJ6XBi662YCAPVj4G6DCQG9ngJOKNdaHXU1G9Mjalq6Kb/rNWNRMjOU5u78BdKQ==",
+          "requires": {
+            "ci-info": "2.0.0",
+            "configstore": "^5.0.1",
+            "fs-extra": "^8.1.0",
+            "node-object-hash": "^2.0.0",
+            "proper-lockfile": "^4.1.1",
+            "tmp": "^0.2.1",
+            "xdg-basedir": "^4.0.0"
+          }
+        },
         "hast-to-hyperscript": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-5.0.0.tgz",
@@ -9731,6 +9795,15 @@
         "minimatch": "~3.0.2"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "got": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
@@ -13701,6 +13774,11 @@
         "unist-util-visit-children": "^1.0.0"
       }
     },
+    "parse-numeric-range": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-0.0.2.tgz",
+      "integrity": "sha1-tPCdQTx6282Yf26SM8e0shDJOOQ="
+    },
     "parse-passwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
@@ -14725,6 +14803,14 @@
         }
       }
     },
+    "prismjs": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.21.0.tgz",
+      "integrity": "sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "probe-image-size": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/probe-image-size/-/probe-image-size-5.0.0.tgz",
@@ -16248,9 +16334,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sanitize-html": {
-      "version": "1.27.4",
+      "version": "1.27.5",
-      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-1.27.4.tgz",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-1.27.5.tgz",
-      "integrity": "sha512-VvY1hxVvMXzSos/LzqeBl9/KYu3mkEOtl5NMwz6jER318dSHDCig0AOjZOtnoCwAC3HMs9LhfWkPCmQGttb4ng==",
+      "integrity": "sha512-M4M5iXDAUEcZKLXkmk90zSYWEtk5NH3JmojQxKxV371fnMh+x9t1rqdmXaGoyEHw3z/X/8vnFhKjGL5xFGOJ3A==",
       "requires": {
         "htmlparser2": "^4.1.0",
         "lodash": "^4.17.15",
@@ -16274,21 +16360,21 @@
           "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA=="
         },
         "domhandler": {
-          "version": "3.0.0",
+          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.2.0.tgz",
-          "integrity": "sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==",
+          "integrity": "sha512-FnT5pxGpykNI10uuwyqae65Ysw7XBQJKDjDjlHgE/rsNtjr1FyGNVNQCVlM5hwcq9wkyWSqB+L5Z+Qa4khwLuA==",
           "requires": {
             "domelementtype": "^2.0.1"
           }
         },
         "domutils": {
-          "version": "2.3.0",
+          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.1.tgz",
-          "integrity": "sha512-xWC75PM3QF6MjE5e58OzwTX0B/rPQnlqH0YyXB/c056RtVJA+eu60da2I/bdnEHzEYC00g8QaZUlAbqOZVbOsw==",
+          "integrity": "sha512-AA5r2GD1Dljhxc+k4zD2HYQaDkDPBhTqmqF55wLNlxfhFQlqaYME8Jhmo2nKNBb+CNfPXE8SAjtF6SsZ0cza/w==",
           "requires": {
             "dom-serializer": "^1.0.1",
             "domelementtype": "^2.0.1",
-            "domhandler": "^3.0.0"
+            "domhandler": "^3.2.0"
           }
         },
         "htmlparser2": {
@@ -16409,6 +16495,12 @@
         "commander": "^2.8.1"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "optional": true
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -18014,6 +18106,12 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "optional": true
+    },
     "tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",

package.json

@@ -20,10 +20,12 @@
     "gatsby-plugin-sass": "^2.3.13",
     "gatsby-plugin-sharp": "^2.6.36",
     "gatsby-remark-images": "^3.3.30",
+    "gatsby-remark-prismjs": "^3.5.14",
     "gatsby-source-filesystem": "^2.3.30",
-    "gatsby-transformer-remark": "^2.8.35",
+    "gatsby-transformer-remark": "^2.8.36",
     "gatsby-transformer-sharp": "^2.5.15",
     "node-sass": "^4.14.1",
+    "prismjs": "^1.21.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },

src/styles/rouge-base16-dark.scss

@@ -1,81 +0,0 @@
-/*
-   generated by rouge http://rouge.jneen.net/
-   original base16 by Chris Kempson (https://github.com/chriskempson/base16)
-*/
-
-.highlight table td { padding: 5px; }
-.highlight table pre { margin: 0; }
-.highlight, .highlight .w {
-  color: #d0d0d0;
-}
-.highlight .err {
-  color: #151515;
-  background-color: #ac4142;
-}
-.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
-  color: #888;
-}
-.highlight .cp {
-  color: #f4bf75;
-}
-.highlight .nt {
-  color: #f4bf75;
-}
-.highlight .o, .highlight .ow {
-  color: #d0d0d0;
-}
-.highlight .p, .highlight .pi {
-  color: #d0d0d0;
-}
-.highlight .gi {
-  color: #90a959;
-}
-.highlight .gd {
-  color: #ac4142;
-}
-.highlight .gh {
-  color: #6a9fb5;
-  font-weight: bold;
-}
-.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
-  color: #aa759f;
-}
-.highlight .kc {
-  color: #d28445;
-}
-.highlight .kt {
-  color: #d28445;
-}
-.highlight .kd {
-  color: #d28445;
-}
-.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
-  color: #90a959;
-}
-.highlight .sr {
-  color: #75b5aa;
-}
-.highlight .si {
-  color: #8f5536;
-}
-.highlight .se {
-  color: #8f5536;
-}
-.highlight .nn {
-  color: #f4bf75;
-}
-.highlight .nc {
-  color: #f4bf75;
-}
-.highlight .no {
-  color: #f4bf75;
-}
-.highlight .na {
-  color: #6a9fb5;
-}
-.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
-  color: #90a959;
-}
-.highlight .ss {
-  color: #90a959;
-}

src/styles/styles.scss

@@ -1,7 +1,6 @@
 @import "bootstrap-variables";
 @import "bootstrap/scss/bootstrap";
 @import "variables";
-@import "rouge-base16-dark";
 
 h1 {
     color: lighten($body-color, 35%);
@@ -80,19 +79,24 @@ article {
     }
 }
 
-figure.highlight {
+.gatsby-highlight {
     @include border-radius();
     padding: 10px;
     border: 1px solid $border-color;
     background-color: lighten($body-bg, 5%);
     color: lighten($body-color, 5%);
+    margin: 10px 0;
 
     pre {
         margin-bottom: 0;
     }
 }
+code {
+    color: $code-color;
+}
 
 blockquote {
+    display: block;
     @include border-radius();
     padding: 10px 20px;
     background-color: lighten($body-bg, 5%);

src/styles/variables.scss

@@ -0,0 +1 @@
+$code-color: #f8c555;

src/templates/post.js

@@ -37,7 +37,7 @@ export default function Post({ data }) {
 				shortname='fishybusiness'
 				config={
 					{
-						url: "https://" + data.site.host + data.sitePage.path,
+						url: "https://www.benramey.com" + data.sitePage.path,
 						identifier: post.slug,
 						title: post.frontmatter.title,
 						language: 'en_US'
@@ -62,8 +62,6 @@ export const query = graphql`
       }
     }
     site {
-      host
-      port
       siteMetadata {
           title
           tagline