added code highlighting

Author: wilfreddenton

assets/css/ascetic.css

@@ -0,0 +1,45 @@
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: white;
+  color: black;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-section,
+.hljs-addition,
+.hljs-attribute,
+.hljs-link {
+  color: #555;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-meta,
+.hljs-deletion {
+  color: #999;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-name,
+.hljs-type,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}

assets/css/style.css

@@ -125,6 +125,7 @@ h2, h3, h4, h5, h6 {
   font-size: 1rem;
   display: block;
   margin-top: 2rem;
+  margin-bottom: 1rem;
 }
 
 hr {
@@ -143,14 +144,23 @@ pre {
 pre code {
   counter-increment: line;
   display: block;
+  background-color: rgb(238, 238, 238) !important
 }
-pre code:before {
-  margin-right: 0.5rem;
-  min-width: 18px;
-  display: inline-block;
-  text-align: left;
-  content: counter(line);
+
+.hljs-ln-numbers {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  text-align: center;
+  color: #999;
+  vertical-align: top;
+  padding-right: 1rem !important;
 }
+
 code, pre {
   font-family: 'Iosevka Web', monospace;
 }

assets/js/highlight.pack.js

@@ -1,22 +1,12 @@
 function main() {
   // code
-  document.querySelectorAll('pre').forEach(pre => {
-    const code = pre.querySelector('code')
-    if (code) {
-      const frag = document.createDocumentFragment()
-      const lines = code.innerHTML.trim().split('\n')
-      lines.forEach(line => {
-        const el = document.createElement('code')
-        el.innerHTML = line
-        frag.append(el)
-      })
-      pre.removeChild(code)
-      pre.appendChild(frag)
-    }
+  document.querySelectorAll('pre code').forEach(block => {
+    hljs.highlightBlock(block)
+    hljs.lineNumbersBlock(block)
   })
 
   // math
-  renderMathInElement(document.body);
+  renderMathInElement(document.body)
 }
 
 if (document.readyState === "loading") {

assets/js/highlightjs-line-numbers.min.js

@@ -32,7 +32,7 @@ instance ToHtml a => ToHtml (Template a) where
       let description = case descriptionM of
             Nothing -> "unsafePerformIO is the blog and personal website of Wilfred Denton."
             Just description' -> description'
-          assetVer = "2"
+          assetVer = "3"
       title_ $ toHtml title
       meta_ [charset_ "utf-8"]
       meta_ [name_ "description", content_ description]
@@ -55,8 +55,11 @@ instance ToHtml a => ToHtml (Template a) where
       link_ [rel_ "stylesheet", type_ "text/css", href_ $ "/static/css/style.css?=" <> assetVer]
       link_ [rel_ "stylesheet", type_ "text/css", href_ "/static/css/bootstrap-grid.min.css"]
       link_ [rel_ "stylesheet", type_ "text/css", href_ "/static/katex/katex.min.css"]
+      link_ [rel_ "stylesheet", type_ "text/css", href_ "/static/css/ascetic.css"]
       script_ [src_ "/static/katex/katex.min.js"] ("" :: Text)
       script_ [src_ "/static/katex/auto-render.min.js"] ("" :: Text)
+      script_ [src_ "/static/js/highlight.pack.js"] ("" :: Text)
+      script_ [src_ "/static/js/highlightjs-line-numbers.min.js"] ("" :: Text)
       script_ [src_ $ "/static/js/script.js?=" <> assetVer, async_ "true"] ("" :: Text)
       script_ [src_ "https://www.googletagmanager.com/gtag/js?id=UA-131857401-1", async_ "true"] ("" :: Text)
       script_ "window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-131857401-1');"