maxenglander/fiddle.css

## fiddle.css
.my_highlight {
  text-decoration:underline;
  background-color:orange;
}

## fiddle.html
<!DOCTYPE html>
<html>
<body>
    <div id="content">
        <header>
            <h1>Annotate example</h1>
        </header>
        <p>Bork bork bork banana smoothie.</p>
    </div>
</body>
</html>

## fiddle.js
Annotator.Plugin.CustomHighlighter = function(element) {
    var myPlugin = {};
    myPlugin.pluginInit = function() {
        myPlugin.annotator.subscribe("annotationsLoaded", function(arrayOfAnnotations) {
            console.log("annotations loaded");
            console.log(arrayOfAnnotations);
            $.each(arrayOfAnnotations, function(i) {
                console.log("processing annotation #" + i);
                var annotation = arrayOfAnnotations[i];
                $.each(annotation.highlights, function(j) {
                    console.log("\tprocessing highlight #" +j);
                    var highlight = annotation.highlights[j];
                    $(highlight).addClass('my_highlight');
                });
            });
        });
        myPlugin.annotator.subscribe("annotationCreated", function(annotation) {
            console.log(annotation);
        });
    };
    return myPlugin;
};

jQuery(function($) {
    $("#content").annotator().annotator("addPlugin", "CustomHighlighter").annotator("addPlugin", "Store", {
        prefix: "/gh/gist/response.json/3181343",
        urls:{
           read:"/"
        }
    });
});

## fiddle.manifest
name: Annotator Plugin
description: Add css class with Annotator Plugin
authors:
  - Max Englander
resources:
  - http://assets.annotateit.org/annotator/v1.1.0/annotator.min.css
  - http://assets.annotateit.org/annotator/v1.1.0/annotator-full.min.js
normalize_css: no

## fiddle.response.json
[
  {
   "id":"1",
   "ranges":[
     {
      "start":"/p",
      "startOffset":10,
      "end":"/p",
      "endOffset":14
     }
   ],
   "quote":"bork",
   "text":"So delicious."
  }
]
	.my_highlight {
	text-decoration:underline;
	background-color:orange;
	}
	<!DOCTYPE html>
	<html>
	<body>
	<div id="content">
	<header>
	<h1>Annotate example</h1>
	</header>
	<p>Bork bork bork banana smoothie.</p>
	</div>
	</body>
	</html>
	Annotator.Plugin.CustomHighlighter = function(element) {
	var myPlugin = {};
	myPlugin.pluginInit = function() {
	myPlugin.annotator.subscribe("annotationsLoaded", function(arrayOfAnnotations) {
	console.log("annotations loaded");
	console.log(arrayOfAnnotations);
	$.each(arrayOfAnnotations, function(i) {
	console.log("processing annotation #" + i);
	var annotation = arrayOfAnnotations[i];
	$.each(annotation.highlights, function(j) {
	console.log("\tprocessing highlight #" +j);
	var highlight = annotation.highlights[j];
	$(highlight).addClass('my_highlight');
	});
	});
	});
	myPlugin.annotator.subscribe("annotationCreated", function(annotation) {
	console.log(annotation);
	});
	};
	return myPlugin;
	};

	jQuery(function($) {
	$("#content").annotator().annotator("addPlugin", "CustomHighlighter").annotator("addPlugin", "Store", {
	prefix: "/gh/gist/response.json/3181343",
	urls:{
	read:"/"
	}
	});
	});
	name: Annotator Plugin
	description: Add css class with Annotator Plugin
	authors:
	- Max Englander
	resources:
	- http://assets.annotateit.org/annotator/v1.1.0/annotator.min.css
	- http://assets.annotateit.org/annotator/v1.1.0/annotator-full.min.js
	normalize_css: no
	[
	{
	"id":"1",
	"ranges":[
	{
	"start":"/p",
	"startOffset":10,
	"end":"/p",
	"endOffset":14
	}
	],
	"quote":"bork",
	"text":"So delicious."
	}
	]