add prism syntax highlighting config

Signed-off-by: Alex Suraci <[email protected]>

Author: vito

.gitignore

@@ -10,6 +10,8 @@ blog/assets/css/*
 !blog/assets/css/*.gitkeep
 blog/assets/images/*
 !blog/assets/images/.gitkeep
+blog/assets/js/*
+!blog/assets/js/.gitkeep
 
 !discourse/*/*.html
 

Makefile

@@ -1,4 +1,4 @@
-objects = js/search.js css/booklit.css css/blog.css css/pipeline.css discourse/common/common.scss discourse/desktop/desktop.scss discourse/mobile/mobile.scss blog/concourse.zip
+objects = js/search.js css/booklit.css css/blog.css css/prism.css css/pipeline.css discourse/common/common.scss discourse/desktop/desktop.scss discourse/mobile/mobile.scss blog/concourse.zip
 
 all: $(objects)
 
@@ -16,6 +16,9 @@ css/booklit.css: less/booklit.less less/*.less
 css/blog.css: less/blog.less less/*.less
 	yarn run lessc $< $@
 
+css/prism.css: less/prism.less less/*.less
+	yarn run lessc $< $@
+
 css/pipeline.css: less/pipeline.less
 	yarn run lessc $< $@
 

blog/assets/js/.gitkeep

@@ -17,6 +17,7 @@
     <link rel="stylesheet" type="text/css" href="{{asset "css/normalize.css"}}" />
     <link rel="stylesheet" type="text/css" href="{{asset "css/iosevka.css"}}" />
     <link rel="stylesheet" type="text/css" href="{{asset "css/blog.css"}}" />
+    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
     <link href="https://fonts.googleapis.com/css?family=Barlow:400,400i,700|Roboto+Slab:300,400,700" rel="stylesheet" />
     {{ghost_head}}
   </head>
@@ -49,5 +50,7 @@
 
 
     {{ghost_foot}}
+
+    <script async type="text/javascript" src="{{asset "js/prism.js"}}"></script>
   </body>
 </html>

blog/default.hbs

@@ -0,0 +1,56 @@
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #7a7373;
+}
+.token.punctuation {
+  color: #9b9b9b;
+}
+.token.selector,
+.token.tag {
+  color: #ed4b35;
+}
+.token.property,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.attr-name,
+.token.deleted {
+  color: #f5a623;
+}
+.token.string,
+.token.char,
+.token.attr-value,
+.token.builtin,
+.token.inserted {
+  color: #11c560;
+}
+.token.operator,
+.token.entity,
+.token.url {
+  color: #2d76cc;
+}
+.token.atrule,
+.token.keyword {
+  color: #4a90e2;
+}
+.token.function {
+  color: #4a90e2;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #4a90e2;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}

css/prism.css

@@ -0,0 +1,71 @@
+@import "colors.less";
+
+.token {
+  &.comment,
+  &.prolog,
+  &.doctype,
+  &.cdata {
+    color: @grey-secondary;
+  }
+
+  &.punctuation {
+    color: @grey-primary;
+  }
+
+  &.selector,
+  &.tag {
+    color: @red-primary;
+  }
+
+  &.property,
+  &.boolean,
+  &.number,
+  &.constant,
+  &.symbol,
+  &.attr-name,
+  &.deleted {
+    color: @amber-primary;
+  }
+
+  &.string,
+  &.char,
+  &.attr-value,
+  &.builtin,
+  &.inserted {
+    color: @green-primary;
+  }
+
+  &.operator,
+  &.entity,
+  &.url {
+    color: @blue-secondary;
+  }
+
+  &.atrule,
+  &.keyword {
+    color: @blue-primary;
+  }
+
+  &.function {
+    color: @blue-primary;
+  }
+
+  &.regex,
+  &.important,
+  &.variable {
+    color: @blue-primary;
+  }
+
+  &.important,
+  &.bold {
+    font-weight: bold;
+  }
+
+  &.italic {
+    font-style: italic;
+  }
+
+  &.entity {
+    cursor: help;
+  }
+}