added code syntax highlighting

index.html

@@ -12,6 +12,7 @@
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+    <link rel="stylesheet" href="lib/prettify.css">
     <link rel="stylesheet" href="style.css">
     <link rel="icon" href="favicon.ico">
 
@@ -25,7 +26,11 @@
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
+
     <script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>
+    <script src="lib/showdown-prettify.js"></script>
+
     <script src="scripts/main.js"></script>
 </head>
 

lib/prettify.css

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * Copyright (C) 2015 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* Pretty printing styles. Used with prettify.js. */
+
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln {
+    color: #000
+}
+
+/* plain text */
+
+@media screen {
+    .str {
+        color: #080
+    }
+
+    /* string content */
+    .kwd {
+        color: #008
+    }
+
+    /* a keyword */
+    .com {
+        color: #800
+    }
+
+    /* a comment */
+    .typ {
+        color: #606
+    }
+
+    /* a type name */
+    .lit {
+        color: #066
+    }
+
+    /* a literal value */
+    /* punctuation, lisp open bracket, lisp close bracket */
+    .pun,
+    .opn,
+    .clo {
+        color: #660
+    }
+
+    .tag {
+        color: #008
+    }
+
+    /* a markup tag name */
+    .atn {
+        color: #606
+    }
+
+    /* a markup attribute name */
+    .atv {
+        color: #080
+    }
+
+    /* a markup attribute value */
+    .dec,
+    .var {
+        color: #606
+    }
+
+    /* a declaration; a variable name */
+    .fun {
+        color: red
+    }
+
+    /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@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
+    }
+
+    .atv {
+        color: #060
+    }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint {
+    border: 1px solid #888
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+    margin-top: 0;
+    margin-bottom: 0
+}
+
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {
+    background: #eee
+}

lib/showdown-prettify.js

@@ -0,0 +1,33 @@
+/*! showdown-prettify 06-01-2016 */
+(function (extension) {
+    'use strict';
+
+    if (typeof showdown !== 'undefined') {
+        extension(showdown);
+    } else if (typeof define === 'function' && define.amd) {
+        define(['showdown'], extension);
+    } else if (typeof exports === 'object') {
+        module.exports = extension(require('showdown'));
+    } else {
+        throw Error('Could not find showdown library');
+    }
+
+}(function (showdown) {
+    'use strict';
+    showdown.extension('prettify', function () {
+        return [{
+            type: 'output',
+            filter: function (source) {
+                return source.replace(/(<pre[^>]*>)?[\n\s]?<code([^>]*)>/gi, function (match, pre, codeClass) {
+                    if (pre) {
+                        return '<pre class="prettyprint linenums"><code' + codeClass + '>';
+                    } else {
+                        return ' <code class="prettyprint">';
+                    }
+                });
+            }
+        }];
+    });
+}));
+
+//# sourceMappingURL=showdown-prettify.js.map

lib/sons-of-obsidian.css

@@ -0,0 +1,131 @@
+/*
+ * Derived from einaros's Sons of Obsidian theme at
+ * http://studiostyl.es/schemes/son-of-obsidian by
+ * Alex Ford of CodeTunnel:
+ * http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
+ */
+
+.str {
+    color: #EC7600;
+}
+
+.kwd {
+    color: #93C763;
+}
+
+.com {
+    color: #66747B;
+}
+
+.typ {
+    color: #678CB1;
+}
+
+.lit {
+    color: #FACD22;
+}
+
+.pun {
+    color: #F1F2F3;
+}
+
+.pln {
+    color: #F1F2F3;
+}
+
+.tag {
+    color: #8AC763;
+}
+
+.atn {
+    color: #E0E2E4;
+}
+
+.atv {
+    color: #EC7600;
+}
+
+.dec {
+    color: purple;
+}
+
+pre.prettyprint {
+    border: 1px solid #000;
+}
+
+ol.linenums {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.prettyprint {
+    background: #000;
+}
+
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L4,
+li.L5,
+li.L6,
+li.L7,
+li.L8,
+li.L9 {
+    color: #555;
+    list-style-type: decimal;
+}
+
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {
+    background: #111;
+}
+
+@media print {
+    .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 {
+        color: #440;
+    }
+
+    .pln {
+        color: #000;
+    }
+
+    .tag {
+        color: #006;
+        font-weight: bold;
+    }
+
+    .atn {
+        color: #404;
+    }
+
+    .atv {
+        color: #060;
+    }
+}

scripts/blog.js

@@ -1,6 +1,7 @@
 let converter = new showdown.Converter({
     parseImgDimensions: true,
-    headerLevelStart: 3
+    headerLevelStart: 3,
+    extensions: ["prettify"]
 });
 $.ajax({
     dataType: "json",
@@ -66,6 +67,7 @@ function openBlogPost(id, onDone) {
             discuss.html("Discuss this post");
         $("#blog-summary-" + id).hide();
 
+        PR.prettyPrint();
         if (onDone)
             onDone();
     });

scripts/main.js

@@ -2,8 +2,10 @@ let dark = getCookie("dark") === "true";
 let cookieNotification = getCookie("notification") !== "true";
 let pride = new Date().getMonth() == 5;
 
-if (dark)
+if (dark) {
     document.write('<link rel="stylesheet" href="dark.css">')
+    document.write('<link rel="stylesheet" href="lib/sons-of-obsidian.css">')
+}
 if (pride)
     document.write('<link rel="stylesheet" href="pride.css">')
 
@@ -37,6 +39,8 @@ $(function () {
         window.location.hash = "";
         location.reload();
     });
+
+    PR.prettyPrint();
 });
 
 function getCookie(key) {