CINXE.COM
commonmark.js demo
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>commonmark.js demo</title> <link href="bootstrap.min.css" rel="stylesheet"> <link href="dingus.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="lodash.min.js"></script> <script src="commonmark.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <h1 class="title">commonmark.js dingus</h1> </div> </div> <div class="row"> <div class="col-md-6"> <p id="text-controls"><a id="clear-text-box">clear</a> <a id="permalink">permalink</a> <label for="smart">Smart punctuation</label> <input type="checkbox" id="smart"/> </p> <textarea id="text">## Try CommonMark You can try CommonMark here. This dingus is powered by [commonmark.js](https://github.com/commonmark/commonmark.js), the JavaScript reference implementation. 1. item one 2. item two - sublist - sublist </textarea> <ul id="warnings"></ul> </div> <div class="col-md-6"> <ul id="result-tabs" 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> <li><a href="#result-ast" role="tab" data-toggle="tab">AST</a></li> </ul> <div class="tab-content"> <div id="preview" class="tab-pane active"> <iframe src="preview.html" frameborder="0" sandbox="allow-same-origin"></iframe> </div> <div id="result" class="tab-pane"> <pre id="htmlpre"><code id="html"></code></pre> </div> <div id="result-ast" class="tab-pane"> <pre id="astpre"><code id="ast"></code></pre> </div> </div> <div class="timing">Parsed in <span class="timing" id="parsetime"></span> ms. Rendered in <span class="timing" id="rendertime"></span> ms.</div> </div> </div> <script src="dingus.js"></script> </body> </html>