add progressive enhanced syntax highlighter

it loads a script at the end of the page that loads the required
resources and initializes the syntax highlighter.

if js is disabled or blocked nothing happens, the code blocks will
display with the style they had until now

1 files changed, 39 insertions, 0 deletions

diff --git a/lib/erl_docgen/priv/js/highlight.js b/lib/erl_docgen/priv/js/highlight.js
new file mode 100644
index 0000000000..0594b42aa3
--- /dev/null
+++ b/lib/erl_docgen/priv/js/highlight.js
@@ -0,0 +1,39 @@
+/*globals document, window*/
+window.addEventListener("load", function () {
+    "use strict";
+    var body = document.body,
+        base = window.__otpTopDocDir || "/doc/js/",
+        cssLink = document.createElement('link'),
+        script = document.createElement('script'),
+        intervalId, attempts = 0;
+
+    cssLink.rel = "stylesheet";
+    cssLink.href = base + "../highlight.css";
+    script.src = base + "highlight.pack.js";
+
+    body.appendChild(cssLink);
+    body.appendChild(script);
+
+    function doHighlight() {
+        attempts += 1;
+
+        if (attempts > 20) {
+            window.clearInterval(intervalId);
+            return;
+        }
+
+        if (!window.hljs) {
+            return;
+        }
+
+        window.clearInterval(intervalId);
+
+        var i, len, nodes = document.querySelectorAll('.example');
+        for (i = 0, len = nodes.length; i < len; i += 1) {
+            window.hljs.highlightBlock(nodes[i]);
+        }
+
+    }
+
+    intervalId = window.setInterval(doHighlight, 50);
+});