remark.search

A quick hack to add search capabilities to remark slideshows.

Dependencies:

• mark.js
• Font Awesome

Demonstration: https://web.fe.up.pt/~arestivo/remark.search/ (try pressing Ctrl+F, searching for slide and then F3)

Usage:

<link rel="stylesheet" href="remark.search.css">
<script src="remark.search.js" type="text/javascript"></script>

window.addEventListener('load', function() {
  RemarkSearch.create({'position': 'top-right', 'caseSensitive' : false, 'showIcon': false}, 'autoSearch': true});
});

Options:

• position: top-left, top-right, bottom-left or bottom-right (position of search box).
• caseSensitive: true or false.
• showIcon: true or false (show icon to open/close search).
• autoSearch: true or false (search on each keystroke).

Keyboard Shortcuts:

• Ctrl+F: Open search bar (or just click on icon if visible)
• Esc: Close search bar (or just click on icon)
• Enter: Search
• F3: Next match or search
• Shift+F3: previous match or search

Colors:

You can change the visual aspect of found matches by altering the following CSS rules:

span.match.current-match {
  background-color: #26f944;
}

span.match {
  padding: 1px;
  background-color: #26dcf9;
  color: black;
}

Screenshot: