<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stmd.js demo</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
config: ["MMLorHTML.js"],
jax: ["input/TeX","input/MathML","output/HTML-CSS","output/NativeMML"],
extensions: ["tex2jax.js","mml2jax.js"],
skipTags: ["script","noscript","style","textarea","pre","code"],
TeX: {
extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
}
});
</script>
<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js"></script>
<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">
<style type="text/css">
ul.nav-tabs li { font-weight: bold; }
label { margin-top: 1em; }
input { margin-top: 0.5em; margin-bottom: 0.5em; }
textarea { width: 100%; }
pre { margin-top: 1em; background-color: transparent; border: none; color: blue; }
#installing { padding: 1em; font-size: 120%; }
</style>
<script type="text/javascript">
// Browsers do not always like self-closing tags
function removeSelfClosingTags(s){
return s.replace(/<([a-z][a-z0-9]*)([^<>]*?) *\/>/g, "<$1$2><\/$1>");
};
$(document).ready(function(){
$('#convert-latex2mathml').click(function() {
$.getJSON("/cgi-bin/texmath-cgi",
{ 'input' : $('#latex-input').val(),
'from': 'tex',
'to': 'mathml' },
function(result){
if (result.success) {
var res = result.success;
$('#mathml-result').text(res);
$('#preview').html(removeSelfClosingTags(res));
} else {
$('#mathml-result').text(result.error);
$('#preview').html('');
};
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"preview"]);
})
});
$('#convert-mathml2latex').click(function() {
$.getJSON("/cgi-bin/texmath-cgi",
{ 'input' : $('#mathml-input').val(),
'from': 'mathml',
'to': 'tex' },
function(result){
if (result.success) {
var res = result.success;
$('#latex-result').text(res);
$('#preview').text("\\[" + res + "\\]");
} else {
$('#latex-result').text(result.error);
$('#preview').text('');
};
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"preview"]);
})
});
$('a[data-toggle="tab"]').click(function (e) {
$('#preview').text(''); // clear preview
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"preview"]);
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h3><a href="http://github.com/jgm/texmath/tree/master">texmath</a>
demo</h3>
</div>
<div id="preview" class="col-md-8"></div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#tex2mathml" role="tab" data-toggle="tab">LaTeX ⇒ MathML</a></li>
<li><a href="#mathml2tex" role="tab" data-toggle="tab">MathML ⇒ LaTeX</a></li>
<li><a href="#installing" role="tab" data-toggle="tab">Installing</a></li>
</ul>
</div>
</div>
<div class="row tab-content">
<div id="tex2mathml" class="tab-pane active">
<div class="col-md-6">
<label for="latex-input">Enter a LaTeX formula here. (You may precede it with macro definitions.)</label><br/>
<textarea name="latex-input" rows="10" id="latex-input">\iiint_{0}^{1}f\left( x \right)\mathbb{d}x</textarea>
<br/>
<input type="submit" id="convert-latex2mathml" value="Convert to MathML" />
</div>
<div class="col-md-6">
<pre id="mathml-result"></pre>
</div>
</div>
<div id="mathml2tex" class="tab-pane">
<div class="col-md-6">
<label for="mathml-input">Enter a MathML formula here.</label><br/>
<textarea name="mathml-input" rows="10" id="mathml-input"><math xmlns="http://www.w3.org/1998/Math/MathML">
<mstyle displaystyle="true">
<msubsup>
<mo>&#x222D;</mo>
<mn>0</mn>
<mn>1</mn>
</msubsup>
<mi>f</mi>
<mrow>
<mo>(</mo>
<mi>x</mi>
<mo>)</mo>
</mrow>
<mtext>&#x200A;</mtext>
<mo>&#x2146;</mo>
<mi>x</mi>
</mstyle> </math></textarea>
<br/>
<input type="submit" id="convert-mathml2latex" value="Convert to LaTeX" />
</div>
<div class="col-md-6">
<pre id="latex-result"></pre>
</div>
</div>
<div id="installing" class="tab-pane">
<div class="col-md-6">
<ol>
<li><p>Install the <a href="http://www.haskell.org/platform/">Haskell
Platform</a>.</p></li>
<li><p><code>cabal update && cabal install texmath -fexecutable</code></p></li>
<li><p><code>texmath --help</code></p></li>
</ol>
<p>If installation succeeds but <code>texmath</code> is not found,
make sure your system PATH includes the cabal bindir, which by
default is <code>~/.cabal</code> on linux
and <code>~/Library/Haskell/bin</code> on Mac OS X.</p>
<p>If you want to use texmath as a Haskell library, see
the <a href="https://hackage.haskell.org/package/texmath">API
documentation</a>.</p>
</div>
</div>
</div>
</div>
</body>
</html>