sample-dynamic-2.html (4198B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Dynamic Preview of Textarea with MathJax Content</title> 5 <!-- Copyright (c) 2012-2015 The MathJax Consortium --> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 10 <script type="text/x-mathjax-config"> 11 MathJax.Hub.Config({ 12 showProcessingMessages: false, 13 tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] } 14 }); 15 </script> 16 <script type="text/javascript" src="../MathJax.js?config=TeX-MML-AM_HTMLorMML"></script> 17 18 <script> 19 var Preview = { 20 delay: 150, // delay after keystroke before updating 21 22 preview: null, // filled in by Init below 23 buffer: null, // filled in by Init below 24 25 timeout: null, // store setTimout id 26 mjRunning: false, // true when MathJax is processing 27 mjPending: false, // true when a typeset has been queued 28 oldText: null, // used to check if an update is needed 29 30 // 31 // Get the preview and buffer DIV's 32 // 33 Init: function () { 34 this.preview = document.getElementById("MathPreview"); 35 this.buffer = document.getElementById("MathBuffer"); 36 }, 37 38 // 39 // Switch the buffer and preview, and display the right one. 40 // (We use visibility:hidden rather than display:none since 41 // the results of running MathJax are more accurate that way.) 42 // 43 SwapBuffers: function () { 44 var buffer = this.preview, preview = this.buffer; 45 this.buffer = buffer; this.preview = preview; 46 buffer.style.visibility = "hidden"; buffer.style.position = "absolute"; 47 preview.style.position = ""; preview.style.visibility = ""; 48 }, 49 50 // 51 // This gets called when a key is pressed in the textarea. 52 // We check if there is already a pending update and clear it if so. 53 // Then set up an update to occur after a small delay (so if more keys 54 // are pressed, the update won't occur until after there has been 55 // a pause in the typing). 56 // The callback function is set up below, after the Preview object is set up. 57 // 58 Update: function () { 59 if (this.timeout) {clearTimeout(this.timeout)} 60 this.timeout = setTimeout(this.callback,this.delay); 61 }, 62 63 // 64 // Creates the preview and runs MathJax on it. 65 // If MathJax is already trying to render the code, return 66 // If the text hasn't changed, return 67 // Otherwise, indicate that MathJax is running, and start the 68 // typesetting. After it is done, call PreviewDone. 69 // 70 CreatePreview: function () { 71 Preview.timeout = null; 72 if (this.mjPending) return; 73 var text = document.getElementById("MathInput").value; 74 if (text === this.oldtext) return; 75 if (this.mjRunning) { 76 this.mjPending = true; 77 MathJax.Hub.Queue(["CreatePreview",this]); 78 } else { 79 this.buffer.innerHTML = this.oldtext = text; 80 this.mjRunning = true; 81 MathJax.Hub.Queue( 82 ["Typeset",MathJax.Hub,this.buffer], 83 ["PreviewDone",this] 84 ); 85 } 86 }, 87 88 // 89 // Indicate that MathJax is no longer running, 90 // and swap the buffers to show the results. 91 // 92 PreviewDone: function () { 93 this.mjRunning = this.mjPending = false; 94 this.SwapBuffers(); 95 } 96 97 }; 98 99 // 100 // Cache a callback to the CreatePreview action 101 // 102 Preview.callback = MathJax.Callback(["CreatePreview",Preview]); 103 Preview.callback.autoReset = true; // make sure it can run more than once 104 105 </script> 106 </head> 107 <body> 108 109 <p> Type text (mixed with MathML, TeX or asciimath) in the box below for a live preview.</p> 110 111 <textarea id="MathInput" cols="60" rows="10" onkeyup="Preview.Update()" style="margin-top:5px"> 112 </textarea> 113 <p>Configured delimiters: 114 <ul> 115 <li>TeX, inline mode: <code>\(...\)</code> or <code>$...$</code></li> 116 <li>TeX, display mode: <code>\[...\]</code> or <code> $$...$$</code></li> 117 <li>Asciimath: <code>`...`</code>.</li> 118 </ul> 119 </p> 120 121 <p>Preview is shown here:</p> 122 <div id="MathPreview" style="border:1px solid; padding: 3px; width:50%; margin-top:5px"></div> 123 <div id="MathBuffer" style="border:1px solid; padding: 3px; width:50%; margin-top:5px; 124 visibility:hidden; position:absolute; top:0; left: 0"></div> 125 126 <script> 127 Preview.Init(); 128 </script> 129 130 </body> 131 </html>