Merge pull request #68 from crystal-community/feat/highlight-search

Highlight search with mark js
crystal-community · Apr 11, 2018 · 975d902 · 975d902
2 parents d1d2026 + b0e6d22
commit 975d902
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/public/javascripts/main.js b/public/javascripts/main.js
@@ -2,6 +2,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
   toggleSecondary();
   signoutListener();
   runPrettify();
+  runHighlighter();
 });
 
 function toggleSecondary() {
@@ -44,3 +45,11 @@ function signoutListener() {
 function runPrettify() {
   hljs.initHighlightingOnLoad();
 }
+
+function runHighlighter() {
+  var search = document.getElementById("search-input");
+  if (search) {
+    var context = document.querySelectorAll(".entry-header, .entry-content");
+    new Mark(context).mark(search.value);
+  }
+}
diff --git a/src/views/layouts/_search.slang b/src/views/layouts/_search.slang
@@ -4,7 +4,7 @@
 
 aside.widget.search
   form name="search" action="/"
-    input.search-input name="query" type="text" placeholder="Search..." value="#{query}"
+    input.search-input id="search-input" name="query" type="text" placeholder="Search..." value="#{query}"
     - if user
       input type="hidden" name="user" value="#{user}"
     - if type

diff --git a/src/views/layouts/application.slang b/src/views/layouts/application.slang
@@ -40,5 +40,6 @@ html
 
     script src="/javascripts/main.js"
     script src="/javascripts/highlight.pack.js"
+    script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"
 
     == render partial: "layouts/_ga.slang"