Highlight searchterm in mkdocs

readthedocs/core/static-src/core/js/doc-embed/mkdocs.js

@@ -4,6 +4,7 @@
 
 
 var rtddata = require('./rtd-data');
+var highlightSearchterm = require('../highlight-searchterm');
 
 
 function init() {
@@ -42,6 +43,9 @@ function init() {
           };
       win.on('resize', apply_stickynav);
       apply_stickynav();
+
+      // Init searchterm highlighting
+      highlightSearchterm.init();
     }
 
 }

readthedocs/core/static-src/core/js/highlight-searchterm.js

@@ -0,0 +1,60 @@
+/*
+ * Allow highlighting of search terms, passed in as "highlight" GET parameter.
+ *
+ * This imitades the behaviour of what is implemented in Sphinx's doctools.js.
+ * Mkdocs does not provide a similiar logic, we implement it here instead which
+ * will work theme agnostic.
+ */
+
+
+require('./jquery.highlighttext');
+
+
+function init() {
+    highlightSearchWords();
+}
+
+
+function urldecode(x) {
+    return decodeURIComponent(x).replace(/\+/g, ' ');
+}
+
+
+function getQueryParameters(s) {
+    if (typeof s == 'undefined')
+        s = document.location.search;
+    var parts = s.substr(s.indexOf('?') + 1).split('&');
+    var result = {};
+    for (var i = 0; i < parts.length; i++) {
+        var tmp = parts[i].split('=', 2);
+        var key = urldecode(tmp[0]);
+        var value = urldecode(tmp[1]);
+        if (key in result)
+            result[key].push(value);
+        else
+            result[key] = [value];
+    }
+    return result;
+}
+
+
+function highlightSearchWords() {
+    var params = getQueryParameters();
+    var terms = (params.highlight) ? params.highlight[0].split(/\s+/) : [];
+    if (terms.length) {
+        var body = $('div.body');
+        if (!body.length) {
+            var body = $('body');
+        }
+        window.setTimeout(function() {
+            $.each(terms, function() {
+                body.highlightText(this.toLowerCase(), 'highlighted');
+            });
+        }, 10);
+    }
+}
+
+
+module.exports = {
+    init: init
+};

readthedocs/core/static-src/core/js/jquery.highlighttext.js

@@ -0,0 +1,29 @@
+/**
+ * highlight a given string on a jquery object by wrapping it in
+ * span elements with the given class name.
+ */
+jQuery.fn.highlightText = function(text, className) {
+    function highlight(node) {
+        if (node.nodeType == 3) {
+            var val = node.nodeValue;
+            var pos = val.toLowerCase().indexOf(text);
+            if (pos >= 0 && !jQuery(node.parentNode).hasClass(className)) {
+                var span = document.createElement("span");
+                span.className = className;
+                span.appendChild(document.createTextNode(val.substr(pos, text.length)));
+                node.parentNode.insertBefore(span, node.parentNode.insertBefore(
+                    document.createTextNode(val.substr(pos + text.length)),
+                    node.nextSibling));
+                    node.nodeValue = val.substr(0, pos);
+            }
+        }
+        else if (!jQuery(node).is("button, select, textarea")) {
+            jQuery.each(node.childNodes, function() {
+                highlight(this);
+            });
+        }
+    }
+    return this.each(function() {
+        highlight(this);
+    });
+};