Skip to content
This repository has been archived by the owner. It is now read-only.
Dynamic Deep-Linking and Highlighting
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Added more sample text. Added links. Removed jQuery Feb 28, 2015
js Stripped out jQuery Feb 28, 2015 Updated querySelector params Feb 28, 2015


Now with 100% less jQuery.

Emphasis provides dynamic paragraph-specific anchor links and the ability to highlight text in a document, all of which is made available in the URL hash so it can be emailed, bookmarked, or shared.

For more information and examples please go to this blog post:


The main configuration element is specifying what paragraph elements are in scope and are not. To this end we specify the elements on or near Line 54:

this.paraSelctors = document.querySelectorAll('#article p');

This covers a lot of common markup in many sites and blog. However this could be configured for your specific site.

Example: If all your P tags reside in DIV tags with the "entry" classname, then this would be sufficient:

this.paraSelctors = document.querySelectorAll(".entry p");

Over at The New York Times, we'd use the following:

this.paraSelctors = document.querySelectorAll('#story-body > p');


Once up and running, a reader can double tap the SHIFT key to show the Paragraph links. Once in this mode they can toggle links and highlighting on a sentence level


Levenshtein calculation in the script is based on some nice code by Andrew Hedges


  • Further work on UI for highlighting with focus on simplicity
  • Social
  • Support for touch-based devices
You can’t perform that action at this time.