🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Transform Markdown footnotes into superpowered sidenotes.Try it out now by changing the size of your browser window in demo page. At full width, notes on this page are rendered as sidenotes. At medium width, they are placed directly after their reference in the text. At small widths, they are rendered as normal footnotes.Features:Transform your footnotes into sidenotes.Toggle between footnotes and sidenotes, for instance, in responsive designs.Toggle between placing the sidenotes before2 or after their reference in the text.Enable reference-less (numberless) sidenotes, using a custom regular expression.Works with any Markdown processor.Nested footnotes (footnotes inside footnotes) work, too!

Plugins

Documentation

jQuery.sidenotes

Build Status

Transform Markdown footnotes into superpowered sidenotes.

Visit the project page for full details.

Installation

Grab jquery.sidenotes.min.js from the GitHub repo, upload it to a server, and add it to your document's head:

<script src="jquery.sidenotes.min.js"></script>

With Bower

jQuery.sidenotes is available as a Bower package.

bower install jquery.sidenotes --save

Usage

Apply the plugin to a jQuery object consisting of each post/document container on the page. There can only be one post per container, and each container must contain both the content of the post and its footnotes.

With no configuration (use sensible defaults):

$('.post').sidenotes();

Or, pass an options object:

$('.post').sidenotes({   'removeRefMarkRegex':     /-sn$/,   'initiallyHidden':        true });

TODO

  • Improve the docs
  • Write tests for the rest of the spec.
  • Set-up browser based test page with key-bindings (like project page)

License

Copyright 2013 Andrew Clark

Licensed under the MIT License

Bitdeli Badge


You May Also Like