Add syntax highlighting

Author: jamesdoc

.eleventy.js

@@ -1,16 +1,17 @@
-const { buildSrc, buildDest } = require('./paths');
+const { buildSrc, buildDest } = require("./paths");
 const markdownIt = require("markdown-it");
-const markdownItResponsive = require('@gerhobbelt/markdown-it-responsive');
+const markdownItResponsive = require("@gerhobbelt/markdown-it-responsive");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
+const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 
-const filters = require('./utils/filters.js');
-const collections = require('./utils/collections.js');
-const shortcodes = require('./utils/shortcodes.js');
+const filters = require("./utils/filters.js");
+const collections = require("./utils/collections.js");
+const shortcodes = require("./utils/shortcodes.js");
 
 module.exports = function (eleventyConfig) {
-
   // Plugins
   eleventyConfig.addPlugin(pluginRss);
+  eleventyConfig.addPlugin(pluginSyntaxHighlight);
 
   // Filters
   Object.keys(filters).forEach((filterName) => {
@@ -28,10 +29,10 @@ module.exports = function (eleventyConfig) {
   });
 
   // Watch assets folder for changes
-  eleventyConfig.addWatchTarget('./src/_assets');
+  eleventyConfig.addWatchTarget("./src/_assets");
 
   // Copy these assets straight across
-  eleventyConfig.addPassthroughCopy({'./src/_assets/svg': '_assets/svg'});
+  eleventyConfig.addPassthroughCopy({ "./src/_assets/svg": "_assets/svg" });
 
   // Alias these layouts
   eleventyConfig.addLayoutAlias("default", "layouts/base.njk");
@@ -47,26 +48,32 @@ module.exports = function (eleventyConfig) {
 
   const rwdOptions = {
     responsive: {
-      'srcset': {
-        '*': [ {
-          width: 320,
-          rename: {
-            suffix: '-320'
-          }
-        }, {
-          width: 550,
-          rename: {
-            suffix: '-550'
-          }
-        } ]
+      srcset: {
+        "*": [
+          {
+            width: 320,
+            rename: {
+              suffix: "-320",
+            },
+          },
+          {
+            width: 550,
+            rename: {
+              suffix: "-550",
+            },
+          },
+        ],
+      },
+      sizes: {
+        "*": "(max-width: 550px) calc(100vw - 120px), 550px",
       },
-      'sizes': {
-        '*': '(max-width: 550px) calc(100vw - 120px), 550px'
-      }
-    }
+    },
   };
 
-  eleventyConfig.setLibrary("md", markdownIt(options).use(markdownItResponsive, rwdOptions));
+  eleventyConfig.setLibrary(
+    "md",
+    markdownIt(options).use(markdownItResponsive, rwdOptions)
+  );
 
   eleventyConfig.setDataDeepMerge(true);
 
@@ -81,7 +88,7 @@ module.exports = function (eleventyConfig) {
       input: `${buildSrc}`,
       output: buildDest,
       data: "_data",
-      includes: "_includes"
+      includes: "_includes",
     },
   };
 };

package-lock.json

@@ -27,5 +27,8 @@
     "svg-sprite": "^1.5.0",
     "url-slug": "^2.3.1",
     "webpack": "^4.43.0"
+  },
+  "devDependencies": {
+    "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1"
   }
 }

package.json

@@ -8,17 +8,18 @@ $vandaTeal: #0089a1;
 $lincolnGreen: #afb302;
 $sparksBlack: #000000;
 
-@import url('https://fonts.googleapis.com/css?family=Space+Mono:400,700');
+@import url("https://fonts.googleapis.com/css?family=Space+Mono:400,700");
 
-html, body {
-  font-family: 'Space Mono', monospace;
+html,
+body {
+  font-family: "Space Mono", monospace;
   font-size: 100%;
   margin: 0;
   padding: 0;
 }
 
 .avatar {
-  background: url('/_assets/img/james.png') no-repeat bottom right;
+  background: url("/_assets/img/james.png") no-repeat bottom right;
   background-size: 100%;
   bottom: 0;
   height: 0;
@@ -35,7 +36,7 @@ body {
 
 section {
   border-radius: 4px;
-  box-shadow: 0 0 40px 10px rgba(206,206,206,0.50);
+  box-shadow: 0 0 40px 10px rgba(206, 206, 206, 0.5);
   margin: 20px;
   min-height: calc(100vh - 120px);
   padding: 40px;
@@ -55,20 +56,22 @@ h1 {
   padding: 0;
 
   &:before {
-    content: '/';
+    content: "/";
   }
 
   &:after {
     color: $themeGreen;
-    content: '_';
+    content: "_";
   }
 
   @media (min-width: 485px) {
     font-size: 3em;
   }
 }
 
-li, p, code {
+li,
+p,
+code {
   font-size: 1em;
   line-height: 1.45em;
   margin: 0 0 1em;
@@ -96,7 +99,7 @@ a {
   color: black;
   outline: none;
   text-decoration: none;
-  transition: color .25s, border .25s;
+  transition: color 0.25s, border 0.25s;
 
   &:hover {
     border-bottom-color: black;
@@ -117,7 +120,7 @@ blockquote {
   padding: 10px 0;
 
   a:before {
-    content: '/';
+    content: "/";
   }
 }
 
@@ -141,11 +144,13 @@ hr {
   margin-bottom: 1em;
 }
 
-@import 'homepage';
-@import 'thoughts';
-@import 'listing';
-@import 'btn';
-@import 'shopLinks';
-@import 'boxedMessage';
-@import 'embedWrapper';
-@import 'nowList';
+@import "homepage";
+@import "thoughts";
+@import "listing";
+@import "btn";
+@import "shopLinks";
+@import "boxedMessage";
+@import "embedWrapper";
+@import "nowList";
+
+@import "prism";