Fix #158: allow users to do highlight.js code posts

.gitignore

@@ -7,6 +7,8 @@ data/
 pod2htmd.tmp
 fgEmojiPicker.js
 full-emoji-list.json
+highlight.min.js
+obsidian.min.css
 www/.well_known
 config/auth.db
 config/has_users

Makefile

@@ -1,5 +1,5 @@
-# I Would highly suggest removing this. And either including it in the repo,
-# Or, having the app bootstrap it.
+SHELL := /bin/bash
+
 .PHONY: install
 install:
 	test -d www/themes || mkdir -p www/themes
@@ -35,9 +35,12 @@ prereq-perl:
 
 .PHONY: prereq-frontend
 prereq-frontend:
-	mkdir -p www/scripts; cd www/scripts && curl -L --remote-name-all                                 \
+	mkdir -p www/scripts; pushd www/scripts && curl -L --remote-name-all                                 \
 		"https://github.com/woody180/vanilla-javascript-emoji-picker/raw/master/fgEmojiPicker.js"     \
-	  "https://github.com/woody180/vanilla-javascript-emoji-picker/raw/master/full-emoji-list.json"
+		"https://github.com/woody180/vanilla-javascript-emoji-picker/raw/master/full-emoji-list.json" \
+		"https://raw.githubusercontent.com/highlightjs/cdn-release/main/build/highlight.min.js"; popd
+	mkdir -p www/styles; cd www/styles && curl -L --remote-name-all \
+		"https://raw.githubusercontent.com/highlightjs/cdn-release/main/build/styles/obsidian.min.css"
 
 .PHONY: reset
 reset: reset-remove install

www/styles/screen.css

@@ -424,3 +424,10 @@ p.posteditortitle {
     padding-right: 1rem;
     padding-bottom: .5rem;
 }
+
+pre {
+    background: #e4e4e4;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #400 #700 #700 #400;
+}

www/templates/header.tx

@@ -19,6 +19,7 @@
         <link rel="stylesheet" type="text/css" href="/styles/structure.css" />
         <link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen" />
         <link rel="stylesheet" type="text/css" href="/styles/print.css" media="print" />
+        <link rel="stylesheet" type="text/css" href="/styles/obsidian.min.css" />
         : if ($embed) {
         <base target="_blank" />
         <link rel="stylesheet" type="text/css" href="/styles/embed.css" media="screen" />

www/templates/posts.tx

@@ -24,6 +24,12 @@
         </script>
     : }
 : }
+<script type="text/javascript" src="/scripts/highlight.min.js"></script>
+<script>
+document.addEventListener("DOMContentLoaded", function(){
+    hljs.highlightAll();
+});
+</script>
 <span class="title">
 : if ( $rss ) {
 <a title="RSS" class="rss" href="<: $route :>?format=rss"></a>