Added pseudocode support

CHANGELOG.md

@@ -22,6 +22,7 @@
 * Adding new sections is now almost completely dynamic and requires much less
     modification of code. See updated `README.me`.
 * Added KaTeX support for rendering Latex and math.
+* Added support for PseudocodeJS for rendering beautiful, standard, pseudocode.
 
 ## 1.1.0
 

assets/css/pseudocode.css

@@ -0,0 +1,79 @@
+@font-face {
+  font-family: KaTeX_Typewriter_Replace;
+  src: url(/fonts/KaTeX_Typewriter-Regular.eot);
+  src: url(/fonts/KaTeX_Typewriter-Regular.eot#iefix) format("embedded-opentype"),
+    url(/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),
+    url(/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),
+    url(/fonts/KaTeX_Typewriter-Regular.ttf) format("ttf");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: KaTeX_SansSerif_Replace;
+  src: url(/fonts/KaTeX_SansSerif-Bold.eot);
+  src: url(/fonts/KaTeX_SansSerif-Bold.eot#iefix) format("embedded-opentype"),
+    url(/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),
+    url(/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),
+    url(/fonts/KaTeX_SansSerif-Bold.ttf) format("ttf");
+  font-weight: 700;
+  font-style: normal;
+}
+.ps-root {
+  font-family: KaTeX_Main, "Times New Roman", Times, serif;
+  font-size: 1em;
+  font-weight: 100;
+  -webkit-font-smoothing: antialiased !important;
+}
+.ps-root .ps-algorithm {
+  margin: 0.8em 0;
+  border-top: 3px solid #000;
+  border-bottom: 2px solid #000;
+}
+.ps-root .ps-algorithm.with-caption > .ps-line:first-child {
+  border-bottom: 2px solid #000;
+}
+.ps-root .katex {
+  text-indent: 0;
+  font-size: 1em;
+}
+.ps-root .ps-line {
+  margin: 0;
+  padding: 0;
+  line-height: 1.2;
+}
+.ps-root .ps-funcname {
+  font-family: KaTeX_Main, "Times New Roman", Times, serif;
+  font-weight: 400;
+  font-variant: small-caps;
+  font-style: normal;
+  text-transform: none;
+}
+.ps-root .ps-keyword {
+  font-family: KaTeX_Main, "Times New Roman", Times, serif;
+  font-weight: 700;
+  font-variant: normal;
+  font-style: normal;
+  text-transform: none;
+}
+.ps-root .ps-comment {
+  font-family: KaTeX_Main, "Times New Roman", Times, serif;
+  font-weight: 400;
+  font-variant: normal;
+  font-style: normal;
+  text-transform: none;
+}
+.ps-root .ps-linenum {
+  font-size: 0.8em;
+  line-height: 1em;
+  width: 1.6em;
+  text-align: right;
+  display: inline-block;
+  position: relative;
+  padding-right: 0.3em;
+}
+.ps-root .ps-algorithmic.with-linenum .ps-line.ps-code {
+  text-indent: -1.6em;
+}
+.ps-root .ps-algorithmic.with-linenum .ps-line.ps-code > span {
+  text-indent: 0;
+}

layouts/partials/head.html

@@ -123,8 +123,9 @@
   {{ $ghost := resources.Get "css/ghost.css" }}
   {{ $glyph := resources.Get "css/glyphicons.css" }}
   {{ $katex := resources.Get "css/katex.css" }}
+  {{ $pseudocode := resources.Get "css/pseudocode.css" }}
 
-  {{ $css := slice $main $goblin $fa $primer $ghost $glyph $katex | resources.Concat "css/bundle.css"  }}
+  {{ $css := slice $main $goblin $fa $primer $ghost $glyph $katex $pseudocode | resources.Concat "css/bundle.css"  }}
   {{ $minifiedCSS := $css | minify}}
   {{ $minifiedCSS.Content | safeCSS }}
 
@@ -136,6 +137,7 @@
 <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
 {{ end -}}
 
+<script src="/javascripts/pseudocode.js"></script>
 <script src="/javascripts/katex.js"></script>
 <script src="/javascripts/katex-auto-render.js"></script>
 <script src="/javascripts/jquery.js"></script>
@@ -152,6 +154,26 @@ document.addEventListener("DOMContentLoaded", function() {
       // • rendering keys, e.g.:
       throwOnError : false
     });
+
+    var blocks = document.getElementsByClassName("pseudocode");
+    for(var blockId = 0; blockId < blocks.length; blockId++) {
+      var block = blocks[blockId];
+
+      var code = block.textContent;
+      var options = {
+        lineNumber: true
+      };
+
+      var outputEl = document.createElement('div');
+      outputEl.className += " pseudocode-out";
+      block.parentNode.insertBefore(outputEl, block.nextSibling);
+
+      pseudocode.render(code, outputEl, options);
+    }
+
+    while( blocks[0]) {
+      blocks[0].parentNode.removeChild(blocks[0]);
+    }
 });
 </script>