<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Try pandoc!</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 type="text/javascript">
(function($) { // http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values
$.QueryString = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'))
})(jQuery);
function newpage() {
var input = $("#text").val();
var from = $("#from").val();
var to = $("#to").val();
var href = window.location.href;
window.location.href = href.replace(/([?].*)?$/,"?" + $.param({text: input, from: from, to: to}));
};
$(document).ready(function() {
var text = $.QueryString["text"];
$("#text").val(text);
var from = $.QueryString["from"] || "markdown";
$("#from").val(from);
var to = $.QueryString["to"] || "html";
$("#to").val(to);
if (text && text != "") {
$.getJSON("/cgi-bin/trypandoc", { from: from, to: to, text: text },
function(res) {
$("#results").text(res.result);
$("#version").text(res.version);
$("#command").text("pandoc --from " + from + " --to " + to);
});
};
$("#convert").click(newpage);
});
</script>
<style type="text/css">
h1 { margin-bottom: 1em; }
body { margin: auto; }
textarea { height: auto; width: 100%; font-family: monospace; margin-top: 15px; }
div.alert { margin: 1em; }
h3 { margin-top: 0; margin-bottom: 0; padding: 0; font-size: 100%; }
pre#results { width: 100%; margin-top: 15px; }
footer { color: #555; text-align: center; margin: 1em; }
p.version { color: #555; }
button#convert { vertical-align: bottom; }
pre#command { margin-top: 1em; background-color: transparent; border: none; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Try <a href="http://pandoc.org">pandoc</a>!</h1>
</div>
<div class="col-md-6">
<pre id="command"></pre>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary btn-xs" id="convert">Convert</button>
<label for="from">
from
</label>
<select id="from">
<option value="docbook">DocBook</option>
<option value="haddock">Haddock markup</option>
<option value="html">HTML</option>
<option value="latex">LaTeX</option>
<option value="markdown" selected>Markdown (pandoc)</option>
<option value="markdown_strict">Markdown (strict)</option>
<option value="markdown_phpextra">Markdown (PHP Markdown Extra)</option>
<option value="markdown_github">Markdown (GitHub)</option>
<option value="mediawiki">MediaWiki</option>
<option value="markdown_mmd">MultiMarkdown</option>
<option value="opml">OPML</option>
<option value="org">Org Mode</option>
<option value="rst">reStructuredText</option>
<option value="textile">Textile</option>
<option value="t2t">Txt2Tags</option>
</select>
<br/>
<textarea id="text" maxlength="3000" rows="15"></textarea>
</div>
<div class="col-md-6">
<label for="to">
to
</label>
<select id="to">
<option value="asciidoc">AsciiDoc</option>
<option value="context">ConTeXt</option>
<option value="docbook">DocBook</option>
<option value="dokuwiki">DokuWiki</option>
<option value="dzslides">DZSlides</option>
<option value="man">Groff man</option>
<option value="html" selected>HTML</option>
<option value="html5">HTML 5</option>
<option value="icml">ICML</option>
<option value="latex">LaTeX</option>
<option value="beamer">LaTeX Beamer</option>
<option value="markdown">Markdown (pandoc)</option>
<option value="markdown_strict">Markdown (strict)</option>
<option value="markdown_phpextra">Markdown (PHP Markdown Extra)</option>
<option value="markdown_github">Markdown (GitHub)</option>
<option value="markdown_mmd">MultiMarkdown</option>
<option value="rst">reStructuredText</option>
<option value="textile">Textile</option>
<option value="mediawiki">MediaWiki</option>
<option value="org">Org Mode</option>
<option value="opendocument">OpenDocument</option>
<option value="opml">OPML</option>
<option value="rtf">RTF</option>
<option value="S5">S5</option>
<option value="slideous">Slideous</option>
<option value="slidy">Slidy</option>
<option value="texinfo">Texinfo</option>
</select>
<br/>
<pre id="results"></pre>
</div>
</div>
</div>
<footer>
<p class="version">pandoc <span id="version"></span></p>
<p>© 2013–2015 <a href="http://johnmacfarlane.net">John MacFarlane</a></p>
</footer>
</body>
</html>