spec: add syntax highlighting for scala code with highlight.js

This adds syntax highlighting for all code scala blocks. Highlighting is
done after MathJax is done rendering so that latex can be used in code
blocks (and it currently *is* used).

Sadly Scala isn't common enough to be bundled in the highlight.min.js
available from CDNs, so we commit a local version of version 8.2 with
only scala bundled in it. The only other language used (ebnf) isn't
supported by highlight.js.

1 files changed, 17 insertions, 0 deletions

diff --git a/spec/_layouts/default.yml b/spec/_layouts/default.yml
index c01e34d83a..f78232f461 100644
--- a/spec/_layouts/default.yml
+++ b/spec/_layouts/default.yml
@@ -13,15 +13,32 @@
   </script>
   <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/2.3-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css">
+  <script src="public/highlight/highlight.pack.js"></script>
 
   <!-- need to use include to see value of page.chapter variable -->
   <style type="text/css">
     {% include numbering.css %}
+
+    /* proper rendering of MathJax into highlighted code blocks */
+    .fixws { white-space: pre; }
+    .fixws .math { white-space: nowrap; }
   </style>
   <script type="text/javascript">
     // clear content of H3 nodes that start with "Example:"
     // the content is only there to determine ID of the H3 element (redcarpet doesn't let us set css id)
     $( document ).ready(function(){ $("h3[id*='example']").text("") })
+
+    // no language auto-detect so that EBDF isn't detected as scala
+    hljs.configure({
+      languages: []
+    });
+
+    // syntax highlighting after mathjax is loaded so that mathjax can be used in code blocks
+    MathJax.Hub.Queue(function () {
+      hljs.initHighlighting();
+      $("pre nobr").addClass("fixws");
+    })
   </script>
 
   <link rel="stylesheet" type="text/css" href="public/stylesheets/screen.css">