JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Author Marks

    JavaScript to toggle highlighting HTML5 'mark' tags, to emphasise con tent.
    Filed under 

    • 🔾3%Overall
    • 40
    • 304.5 days
    • 🕩3
    • 👥3

    Author Marks

    JavaScript to toggle highlighting HTML5 mark tags, to emphasise content.

    Author Marks

    Author

    Matt Gemmell (@mattgemmell).

    License

    BSD. Attribution politely requested.

    Requirements

    Compatibility

    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.

    Installation

    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.

    Installation - Octopress

    If you're using Octopress, you already have jQuery, so don't worry about that. To install the script, simply:

    1. Copy the authormarks.js file to source/javascripts/
    2. Add the aforementioned line of code to source/_includes/custom/head.html
    3. (Add some CSS wherever you prefer.)
    4. Regenerate and deploy your site.

    CSS

    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:

    1. .marks-highlighted for marks which are currently highlighted. This style will also be applied to the toggling links themselves, whilst highlighting is active.
    2. .toggle-marks-highlight for your toggle link(s), optionally.

    Creating marks in your content

    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.

    Support

    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!

    Show All