JSFiddle - React, Tailwind, and code Playground

by aron

HTML

<script src="https://raw.github.com/gist/7a8896ad4a1615e15c38/a1cee40526e13d98bfc6a331be309bd32ce3dd2a/annotator-full.1.1.0-field-order.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS annotation test</title>
  </head>
  <body>
    <header>
      <h1>Javascript annotation service test</h1>
    </header>

    <div id="airlock">
      <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

      <h2>Header Level 2</h2>

      <ol>
         <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
         <li>Aliquam tincidunt mauris eu risus.</li>
      </ol>

      <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

      <h3>Header Level 3</h3>

      <ul>
         <li id="listone">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
         <li id="listtwo">Aliquam tincidunt mauris eu risus.</li>
      </ul>

      <pre><code>
      #header h1 a {
        display: block;
        width: 300px;
        height: 80px;
      }
      </code></pre>
    </div>
  </body>


</html>

CSS

.annotator-notice,.annotator-filter *,.annotator-widget *{font-family:"Helvetica...

JavaScript

jQuery(function ($) {
        if (typeof $.fn.annotator !== 'function') {
          alert("Ooops! it looks like you haven't built the Annotator concatenation file. " +
                "Either download a tagged release from GitHub, or modify the Cakefile to point " +
                "at your copy of the YUI compressor and run `cake package`.");
        } else {
          // This is the important bit: how to create the annotator and add
          // plugins
          $('#airlock').annotator()
                       .annotator('addPlugin', 'Permissions')
                       .annotator('addPlugin', 'Markdown')
                       .annotator('addPlugin', 'Tags');

          $('#airlock').data('annotator').plugins['Permissions'].setUser("Joe Bloggs");
        }
      });