You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.1 KiB
78 lines
2.1 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Dynamic Preview of Textarea with MathJax Content</title>
|
|
<!-- Copyright (c) 2012-2018 The MathJax Consortium -->
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
<script type="text/x-mathjax-config">
|
|
MathJax.Hub.Config({
|
|
showProcessingMessages: false,
|
|
tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
|
|
});
|
|
</script>
|
|
<script type="text/javascript" src="../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
|
|
|
<script>
|
|
var Preview = {
|
|
delay: 150, // a short delay before processing after typing
|
|
|
|
typeset: null, // the typeset preview area (filled in by Init below)
|
|
preview: null, // the untypeset preview (filled in by Init below)
|
|
buffer: null, // the new preview to be typeset (filled in by Init below)
|
|
|
|
oldtext: '', // used to see if an update is needed
|
|
pending: false, // true when a restart is in the MathJax queue
|
|
|
|
//
|
|
// Get the preview and buffer DIV's
|
|
//
|
|
Init: function () {
|
|
this.typeset = document.getElementById("MathPreview");
|
|
this.buffer = document.createElement("div");
|
|
this.review = document.createElement("div");
|
|
},
|
|
|
|
//
|
|
// This gets called when a key is pressed in the textarea.
|
|
//
|
|
Update: function () {
|
|
var text = document.getElementById("MathInput").value;
|
|
if (text !== this.oldtext) {
|
|
this.oldtext = text;
|
|
if (!this.pending) {
|
|
this.pending = true;
|
|
MathJax.Hub.Queue(["Restart",this]);
|
|
}
|
|
}
|
|
},
|
|
|
|
Restart: function () {
|
|
var text = "<p>"+this.oldtext.replace(/\n\n+/g,"</p><p>")+"</p>";
|
|
this.buffer.innerHTML = this.typeset.innerHTML = text;
|
|
this.pending = false;
|
|
MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.typeset]);
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
Type text in the box below:<br/>
|
|
|
|
<textarea id="MathInput" cols="60" rows="10" onkeyup="Preview.Update()" style="margin-top:5px">
|
|
</textarea>
|
|
<br/><br/>
|
|
Preview is shown here:
|
|
<div id="MathPreview" style="border:1px solid; padding: 3px; width:50%; margin-top:5px"></div>
|
|
|
|
<script>
|
|
Preview.Init();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|