index.html

<!doctype html>
<link href='dist/woofmark.css' rel='stylesheet' type='text/css' />
<link href='example/example.css' rel='stylesheet' type='text/css' />
<link href='example/highlights.css' rel='stylesheet' type='text/css' />
<title>woofmark</title>
<h1>woofmark</h1>
<h3>Barking up the DOM tree. <b>**woof** &lt;strong&gt;woof&lt;/strong&gt;</b><br/>A modular, progressive, and beautiful Markdown and HTML editor</h3>
<a href='https://github.com/bevacqua/woofmark'>
  <img class='gh-fork' src='https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png' />
</a>
<div class='parent'>
  <label for='ta'>Create your website in the area below: </label>
  <div>
    <textarea id='ta', autofocus># Markdown?

Here's a teensie bit of [Markdown][1] to get you started.

Markdown lets you <mark>produce **rich** HTML-formatted text by writing _plain text_</mark>. You can write `code`, text in _italics_ or give them **a "bolder" format**. You can create headings by prefixing them with one or more hash characters _(#)_. The _less hashes_ they have, the _more prominent_ your headings become.

Creating **links** is merely a matter of [wrapping some text in brackets][2] and referencing a resource locator, like the ones you'll find at the bottom of this text. <mark>Images can be embedded</mark> just the same, except you'll have to prefix the wrapped text with _an exclamation mark_.

> Click on the <kbd>HTML</kbd> button to see this text come to life as HTML, the <mark>markup</mark> language of the web.
>
> -- Nico

Note that,

```js
var markTags = 'still work';
var within = true;

function code (<mark>here, are, some, args</mark>) {
  // do wonderful things!
  return here * are - some + args;
}
```

[1]: http://daringfireball.net/projects/markdown/ "Original introduction to Markdown"
[2]: http://ponyfoo.com</textarea>
  </div>
  <pre>
    <code>
woofmark(document.querySelector('#ta'), {
  parseMarkdown: megamark,
  parseHTML: domador
});
    </code>
  </pre>
  <sub><strong>Disclaimer:</strong> the example has a teensie bit more of code that's used to preserve the GitHub-style <kbd>```</kbd> code fences.</sub>
</div>
<div class='parent'>
  <label>The buttons above look kind of rough, but that's on purpose: it's up to you to style them and the API helps you do that. Here's another example using Font Awesome.</label>
  <img src='http://i.imgur.com/AhwXSLu.png' />
</div>
<h3>Get it on GitHub! <a href='https://github.com/bevacqua/woofmark'>bevacqua/woofmark</a></h3>
<script src='dist/example.js'></script>