mirror of
https://github.com/urbit/shrub.git
synced 2024-12-15 12:43:31 +03:00
152 lines
5.3 KiB
HTML
152 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<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="js/commonmark.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
var writer = new commonmark.HtmlRenderer();
|
|
var reader = new commonmark.DocParser();
|
|
|
|
function getQueryVariable(variable)
|
|
{
|
|
var query = window.location.search.substring(1);
|
|
var vars = query.split("&");
|
|
for (var i=0;i<vars.length;i++) {
|
|
var pair = vars[i].split("=");
|
|
if(pair[0] == variable){return decodeURIComponent(pair[1]);}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
|
|
$(document).ready(function() {
|
|
var timer;
|
|
var x;
|
|
var parsed;
|
|
var render = function() {
|
|
if (parsed === undefined) {
|
|
return;
|
|
}
|
|
var startTime = new Date().getTime();
|
|
var result = writer.renderBlock(parsed);
|
|
var endTime = new Date().getTime();
|
|
var renderTime = endTime - startTime;
|
|
// $("#html").text(result);
|
|
$("#preview").html(result);
|
|
$("#html").text(result);
|
|
$("#ast").text(commonmark.ASTRenderer(parsed));
|
|
$("#rendertime").text(renderTime);
|
|
};
|
|
var parseAndRender = function () {
|
|
if (x) { x.abort() } // If there is an existing XHR, abort it.
|
|
clearTimeout(timer); // Clear the timer so we don't end up with dupes.
|
|
timer = setTimeout(function() { // assign timer a new timeout
|
|
var startTime = new Date().getTime();
|
|
parsed = reader.parse($("#text").val());
|
|
var endTime = new Date().getTime();
|
|
var parseTime = endTime - startTime;
|
|
$("#parsetime").text(parseTime);
|
|
$(".timing").css('visibility','visible');
|
|
/*
|
|
var warnings = parsed.warnings;
|
|
$("#warnings").html('');
|
|
for (i=0; i < warnings.length; i++) {
|
|
var w = warnings[i];
|
|
var warning = $("#warnings").append('<li></li>');
|
|
$("#warnings li").last().text('Line ' + w.line + ' column ' + w.column + ': ' + w.message);
|
|
}
|
|
*/
|
|
render();
|
|
}, 0); // ms delay
|
|
};
|
|
var initial_text = getQueryVariable("text");
|
|
if (initial_text) {
|
|
$("#text").val(initial_text);
|
|
// show HTML tab if text is from query
|
|
$('#result-tabs a[href="#result"]').tab('show');
|
|
}
|
|
// make tab insert a tab in the text box:
|
|
$("#text").keydown(function (e) {
|
|
if (e.which == 9) {
|
|
e.preventDefault();
|
|
this.value += "\t";
|
|
}
|
|
});
|
|
parseAndRender();
|
|
$("#clear-text-box").click(function(e) {
|
|
$("#text").val('');
|
|
window.location.search = "";
|
|
parseAndRender();
|
|
});
|
|
$("#permalink").click(function(e) {
|
|
window.location.pathname = "/index.html";
|
|
window.location.search = "text=" + encodeURIComponent($("#text").val());
|
|
});
|
|
$("#text").bind('keyup paste cut mouseup', parseAndRender);
|
|
$(".option").change(render);
|
|
});
|
|
</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; overflow: scroll; resize: vertical; width: 95%; }
|
|
div#astpre { height: 400px; overflow: scroll; resize: vertical; width: 95%; }
|
|
div#preview { height: 400px; overflow: scroll; resize: vertical; width: 95%; }
|
|
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 }
|
|
#warnings li { color: red; font-weight: bold; }
|
|
label { padding-left: 1em; padding-top: 0; padding-bottom: 0; }
|
|
div.timing { color: gray; visibility: hidden; height: 2em; }
|
|
p#text-controls { height: 1em; margin-top: 1em; }
|
|
a#permalink { margin-left: 1em; }
|
|
span.timing { font-weight: bold; }
|
|
span.timing { font-weight: bold; }
|
|
</style>
|
|
</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></p>
|
|
<textarea id="text"></textarea>
|
|
<ul id="warnings"></ul>
|
|
<div class="timing">Parsed in <span class="timing" id="parsetime"></span>
|
|
ms. Rendered in <span class="timing" id="rendertime"></span> ms.</div>
|
|
</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">
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|