---
layout: default
---
<header class="text-center">
    <h1>mark[lib</h1>

    <p class="subline" id="automark">Damn fast easy marking with serializable selections.</p>

    <a class="button alt" href="https://github.com/BowlingX/marklib"><i class="fa fa-github"></i> Fork me on Github</a>
    <a class="button" href="{{site.downloadLink}}"><i class="fa fa-download"></i> <span class="hide-small">Download {{site.version}}</span></a>
    <a class="button twitter" href="https://twitter.com/bowlingx"><i class="fa fa-twitter"></i> <span class="hide-small">@bowlingx</span></a>
</header>
<div class="presentation">
    <div class="wrapper">
        <h2>Try it</h2>

        <p>Start marking this paragraph as an example and use either <code>enter</code> or the button under this
            section to highlight the result.<br>
            <code>Marklib</code> supports highlighting/marking <strong>textnodes</strong>
            even if the DOM has been modified by another marking of <code>Marklib</code>. If you mark something on this
            page, it will be stored on your browsers local storage. Try to refresh the page and play a little bit :).
        </p>

        <p class="text-center subline tight">Show me the Code, Dude</p>
    </div>
</div>
{% highlight javascript %}
var selection = document.getSelection();
new Marklib.Rendering(document)
           .renderWithRange(selection.getRangeAt(0));
{% endhighlight %}
<div class="presentation" id="secondParagraph">
    <div class="wrapper">
        <h2>A second paragraph with some latin like text</h2>

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua. <strong>At vero eos et accusam</strong> et justo duo dolores et ea
            rebum.
            Stet clita kasd
            gubergren, <span id="secondParagraphItem">no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
            Lorem ipsum dolorasit amet, consetetur
            sadipscing
            elitr, sed diam nonumy eirmod tempor invidunt ut <i>labore</i> et dolore magna aliquyam erat, sed diam
            voluptua.
            At
            vero
            eos et accusam et justo duo <strong>dolores ea rebum. Stet</strong> clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum
            dolor sit amet.
        </p>
        <br>

        <div class="text-center">
            <button id="action-mark"><i class="fa fa-eraser"></i> Mark selection</button>
            <button class="warn" id="action-clear"><i class="fa fa-trash-o"></i></button>
        </div>
        <p class="text-center subline tight">Marklib depends on zero libraries and is just around 4.5kb compressed</p>
    </div>
</div>
{% highlight bash %}
npm install --save-dev marklib
{% endhighlight %}
<footer>
    <p class="text-center">Made with ♥ by David Heidrich, licensed under the MIT License</p>
</footer>