JavaScript to toggle highlighting HTML5 mark
tags, to emphasise content.
BSD. Attribution politely requested.
I've tested it on the latest versions (as of 8th May 2013) of:
- Safari, Chrome and Firefox on OS X.
- Safari on iPad and iPhone.
Load the JavaScript in your webpage, probably in the HEAD section, like this:
<script src='/javascripts/authormarks.js' type="text/javascript"></script>
Make sure jQuery is loaded too. You'll also want to add some CSS.
If you're using Octopress, you already have jQuery, so don't worry about that. To install the script, simply:
- Copy the
authormarks.js
file tosource/javascripts/
- Add the aforementioned line of code to
source/_includes/custom/head.html
- (Add some CSS wherever you prefer.)
- Regenerate and deploy your site.
Author Marks works very simply by adding (or removing) a given CSS class to any mark
tags in your document which have the author-mark
CSS class applied.
You'll want to add these CSS styles:
.marks-highlighted
for marks which are currently highlighted. This style will also be applied to the toggling links themselves, whilst highlighting is active..toggle-marks-highlight
for your toggle link(s), optionally.
Just use the HTML5 mark
tag with the author-mark
class applied: <mark class="author-mark">An important remark</mark>
.
You should add at least one link that your readers can use to toggle your author marks. Any old link will do, as long as it has the CSS class .toggle-marks-highlight
.
This JavaScript will add an appropriate on-click action to such links, to toggle the marks.
There is absolutely no support available. Feel free to report issues on the github issue tracker for this project, or indeed to fix them yourself and submit a pull request!