CommonMark demo

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="//jgm.github.io/stmd/js/stmd.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
  <h1>CommonMark demo <small>(<a href='http://jgm.github.io/stmd/js/'>original</a>)</small></h1>
    <div class="row">
      <div class="col-md-3">
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#preview" role="tab" data-toggle="tab">Preview</a>
          </li>
          <li><a href="#result" role="tab" data-toggle="tab">HTML</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <textarea id="text">
# Hello there

This is a paragraph.

- one
- two
- three
- four

1. pirate
2. ninja
3. zombie
  
</textarea>
      </div>
      <div class="col-md-6">
        <div class="tab-content">
          <div id="preview" class="tab-pane active">
          </div>
          <div id="result" class="tab-pane">
            <pre id="htmlpre"><code id="html"></code></pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

// Code goes here

var writer = new stmd.HtmlRenderer();
var reader = new stmd.DocParser();

$(document).ready(function() {
  var parsed;
  var render = function() {
    if (parsed === undefined) {
      return;
    }
    var result = writer.renderBlock(parsed);
    $("#preview").html(result);
    $("#html").text(result);
  };
  var parseAndRender = function() {
    setTimeout(function() { // assign timer a new timeout
      parsed = reader.parse($("#text").val());
      render();
    }, 0); // ms delay
  };
  $("#text").keyup(parseAndRender);
  $(".option").change(render);
  parseAndRender();
});

/* Styles go here */

textarea#text {
  height: 250px;
  width: 95%;
  font-family: monospace;
  font-size: 92%;
}
pre code#html {
  font-size: 92%;
  font-family: monospace;
}
pre#htmlpre {
  height: 400px;
  width: 95%;
  overflow: scroll;
}
div#preview {
  height: 400px;
  overflow: scroll;
}
div.row {
  margin-top: 1em;
}
blockquote {
  font-size: 100%;
}
footer {
  color: #555;
  text-align: center;
  margin: 1em;
}
pre {
  display: block;
  padding: 0.5em;
  color: #333;
  background: #f8f8ff
}
label {
  padding-left: 1em;
  padding-top: 0;
  padding-bottom: 0;
}

A port of John MacFarlane's [~~standard~~ ~~common markdown~~ CommonMark demo][1] described on [coding horror][2].

[1]: http://jgm.github.io/stmd/js/
[2]: http://blog.codinghorror.com/standard-flavored-markdown/