diff options
Diffstat (limited to 'js/index.html')
| -rw-r--r-- | js/index.html | 41 |
1 files changed, 20 insertions, 21 deletions
diff --git a/js/index.html b/js/index.html index 05fc216..6f462a9 100644 --- a/js/index.html +++ b/js/index.html @@ -2,18 +2,17 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>stmd.js demo</title> + <title>commonmark.js demo</title> <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="stmd.js"></script> + <script src="commonmark.js"></script> <script type="text/javascript"> -var writer = new stmd.HtmlRenderer(); -var reader = new stmd.DocParser(); +var writer = new commonmark.HtmlRenderer(); +var reader = new commonmark.DocParser(); $(document).ready(function() { - $(".timing").hide(); var timer; var x; var parsed; @@ -28,6 +27,7 @@ $(document).ready(function() { // $("#html").text(result); $("#preview").html(result); $("#html").text(result); + $("#ast").text(commonmark.ASTRenderer(parsed)); $("#rendertime").text(renderTime); }; var parseAndRender = function () { @@ -39,7 +39,7 @@ $(document).ready(function() { var endTime = new Date().getTime(); var parseTime = endTime - startTime; $("#parsetime").text(parseTime); - $(".timing").show(); + $(".timing").css('visibility','visible'); /* var warnings = parsed.warnings; $("#warnings").html(''); @@ -57,6 +57,8 @@ $(document).ready(function() { }); </script> <style type="text/css"> + h1.title { font-family: monospace; font-size: 120%; font-weight: bold; + margin-top: 0.5em; margin-bottom: 0; } textarea#text { height: 400px; 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; } @@ -67,7 +69,7 @@ $(document).ready(function() { pre { display: block; padding: 0.5em; color: #333; background: #f8f8ff } #warnings li { color: red; font-weight: bold; } label { padding-left: 1em; padding-top: 0; padding-bottom: 0; } - p.timing { color: red; } + div.timing { color: red; visibility: hidden; height: 3em; } span.timing { font-weight: bold; } span.timing { font-weight: bold; } </style> @@ -75,33 +77,30 @@ $(document).ready(function() { <body> <div class="container"> <div class="row"> - <div class="col-md-6"> - <h1>stmd.js dingus</h1> - </div> - <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 class="col-md-3"> - <p class="timing">Parsed in <span class="timing" id="parsetime"></span> milliseconds.<br/> - Rendered in <span class="timing" id="rendertime"></span> milliseconds.</p> - </div> + <h1 class="title">commonmark.js dingus</h1> </div> <div class="row"> <div class="col-md-6"> + <div class="timing">Parsed in <span class="timing" id="parsetime"></span> + ms. Rendered in <span class="timing" id="rendertime"></span> ms.</div> <textarea id="text"></textarea> <ul id="warnings"></ul> </div> <div class="col-md-6"> + <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> + <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"> </div> <div id="result" class="tab-pane"> <pre id="htmlpre"><code id="html"></code></pre> </div> - </div> + <div id="result-ast" class="tab-pane"> + <pre id="astpre"><code id="ast"></code></pre> + </div> </div> </div> </div> |