switch to highlights and nord syntax highlighting

gatsby-config.js

@@ -66,7 +66,14 @@ module.exports = {
               destinationDir: 'media'
             }
           },
-          'gatsby-remark-prismjs',
+          {
+            resolve: 'gatsby-remark-highlights',
+            options: {
+              codeWrap: {
+                className: 'nord'
+              }
+            }
+          },
           'gatsby-remark-smartypants',
           'gatsby-remark-autolink-headers'
         ]

package.json

@@ -43,8 +43,8 @@
     "gatsby-redirect-from": "^0.1.1",
     "gatsby-remark-autolink-headers": "^2.0.6",
     "gatsby-remark-copy-linked-files": "^2.0.5",
+    "gatsby-remark-highlights": "^1.3.4",
     "gatsby-remark-images": "^2.0.3",
-    "gatsby-remark-prismjs": "^3.0.1",
     "gatsby-remark-smartypants": "^2.0.5",
     "gatsby-source-filesystem": "^2.0.1",
     "gatsby-transformer-remark": "^2.1.4",

src/styles/_code.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'nord/src/sass/nord';
 
 code,
 kbd,
@@ -10,12 +11,14 @@ samp {
 
 code,
 kbd {
-    padding: 2px 4px;
+    padding: .1em;
 }
 
 code,
 samp {
-    color: darken($code-color, 40%);
+    white-space: normal;
+    background: $nord4;
+    color: inherit;
     background-color: rgba($code-bg, .05);
     border-radius: $border-radius;
 }
@@ -30,7 +33,7 @@ kbd {
 
 pre {
     display: block;
-    padding: $spacer / 2;
+    padding: $spacer / 1.5 $spacer;
     margin-bottom: $spacer;
     line-height: $line-height;
     color: $code-color;
@@ -62,10 +65,17 @@ pre {
         word-break: normal;
         overflow: auto;
     }
+
+    .line {
+        white-space: pre;
+        overflow-wrap: normal;
+        word-wrap: normal;
+        word-break: normal;
+    }
 }
 
-pre > code.language-shell,
-pre > code.language-bash {
+pre .line:only-child .source.shell,
+pre .line:only-child .source.bash {
     padding-left: $spacer / 2;
     display: block;