alecjacobson · September 26, 2020 03:49
diff --git a/real-time-latex-in-browser.html b/real-time-latex-in-browser.html
 <!DOCTYPE html>
 <html>
 <head>
 <title>Real-time LaTeX in browser</title>
 <!-- https://github.com/mathjax/MathJax/blob/master/test/sample-dynamic-2.html -->
 <!-- Copyright (c) 2012-2015 The MathJax Consortium -->
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    showProcessingMessages: false,
    tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
  });
 </script>
 <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>

 <script>
 var Preview = {
  delay: 10,        // delay after keystroke before updating
  preview: null,     // filled in by Init below
  buffer: null,      // filled in by Init below
  timeout: null,     // store setTimout id
  mjRunning: false,  // true when MathJax is processing
  mjPending: false,  // true when a typeset has been queued
  oldText: null,     // used to check if an update is needed
  //
  //  Get the preview and buffer DIV's
  //
  Init: function () {
    this.preview = document.getElementById("MathPreview");
    this.buffer = document.getElementById("MathBuffer");
  },
  //
  //  Switch the buffer and preview, and display the right one.
  //  (We use visibility:hidden rather than display:none since
  //  the results of running MathJax are more accurate that way.)
  //
  SwapBuffers: function () {
    var buffer = this.preview, preview = this.buffer;
    this.buffer = buffer; this.preview = preview;
    buffer.style.visibility = "hidden"; buffer.style.position = "absolute";
    preview.style.position = ""; preview.style.visibility = "";
  },
  //
  //  This gets called when a key is pressed in the textarea.
  //  We check if there is already a pending update and clear it if so.
  //  Then set up an update to occur after a small delay (so if more keys
  //    are pressed, the update won't occur until after there has been 
  //    a pause in the typing).
  //  The callback function is set up below, after the Preview object is set up.
  //
  Update: function () {
    if (this.timeout) {clearTimeout(this.timeout)}
    this.timeout = setTimeout(this.callback,this.delay);
  },
  //
  //  Creates the preview and runs MathJax on it.
  //  If MathJax is already trying to render the code, return
  //  If the text hasn't changed, return
  //  Otherwise, indicate that MathJax is running, and start the
  //    typesetting.  After it is done, call PreviewDone.
  //  
  CreatePreview: function () {
    Preview.timeout = null;
    if (this.mjPending) return;
    var text = document.getElementById("MathInput").value;
    if (text === "")
    {
      text = document.getElementById("MathInput").placeholder;
    }
    if (text === this.oldtext) return;
    if (this.mjRunning) {
      this.mjPending = true;
      MathJax.Hub.Queue(["CreatePreview",this]);
    } else {
      this.buffer.innerHTML = this.oldtext = text;
      this.mjRunning = true;
      MathJax.Hub.Queue(
 	["Typeset",MathJax.Hub,this.buffer],
 	["PreviewDone",this]
      );
    }
  },
  //
  //  Indicate that MathJax is no longer running,
  //  and swap the buffers to show the results.
  //
  PreviewDone: function () {
    this.mjRunning = this.mjPending = false;
    this.SwapBuffers();
  }
 };
 //
 //  Cache a callback to the CreatePreview action
 //
 Preview.callback = MathJax.Callback(["CreatePreview",Preview]);
 Preview.callback.autoReset = true;  // make sure it can run more than once
 Preview.Update();
 </script>
 <style>
 body, html{
  height:100%;
  padding: 0px;
  margin: 0px;
 }
 table
 {
  width: 100%;
  padding: 0px;
  margin: 0px;
  height: 100vh;
  overflow: hidden;
 }
 textarea
 {
 border: none;
 margin: 0px;
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 20px;
  height: 99.5vh;
  color: #FFF;
  background-color: #222;
  font-size: 1.5em;
  font-family: "Courier", monospace;
  width: 100%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
 }
 tr,td
 {
  vertical-align: top;
  height: 100vh;
  overflow: auto;
  width: 50%;
  background-color: #FFF;
  padding: 0px;
  margin: 0px;
 }
 td#Input
 {
  background-color: #222;
 }
 td#Output{
  position: relative;
 }
 #MathBuffer
 {
  font-size: 1.5em;
  margin-top: 20px;
  height: 100vh;
  padding-left: 20px;
  padding-left: 20px;
  position: absolute;
  left: 0;
  top: 0;
 }
 #MathPreview
 {
  font-size: 1.5em;
  margin-top: 20px;
  height: 100vh;
  padding-left: 20px;
  padding-left: 20px;
  position: absolute;
  left: 0;
  top: 0;
 }
 </style>
 </head>
 <body>

 <table cellspacing="0" cellpadding="0">
 <tr>
 <td id=Input>
 <textarea 
 placeholder="Try Euler's identity $e^{i \pi} + 1 = 0$ ..."
 id="MathInput" onkeyup="Preview.Update()">
 </textarea>
 </td>
 <td id=Output>
 <div id="MathPreview"></div>
 <div id="MathBuffer"></div>
 </td>
 </tr>
 </table>

 <script>
 Preview.Init();
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Real-time LaTeX in browser</title>
	<!-- https://github.com/mathjax/MathJax/blob/master/test/sample-dynamic-2.html -->
	<!-- Copyright (c) 2012-2015 The MathJax Consortium -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script type="text/x-mathjax-config">
	MathJax.Hub.Config({
	showProcessingMessages: false,
	tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
	});
	</script>
	<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>

	<script>
	var Preview = {
	delay: 10, // delay after keystroke before updating
	preview: null, // filled in by Init below
	buffer: null, // filled in by Init below
	timeout: null, // store setTimout id
	mjRunning: false, // true when MathJax is processing
	mjPending: false, // true when a typeset has been queued
	oldText: null, // used to check if an update is needed
	//
	// Get the preview and buffer DIV's
	//
	Init: function () {
	this.preview = document.getElementById("MathPreview");
	this.buffer = document.getElementById("MathBuffer");
	},
	//
	// Switch the buffer and preview, and display the right one.
	// (We use visibility:hidden rather than display:none since
	// the results of running MathJax are more accurate that way.)
	//
	SwapBuffers: function () {
	var buffer = this.preview, preview = this.buffer;
	this.buffer = buffer; this.preview = preview;
	buffer.style.visibility = "hidden"; buffer.style.position = "absolute";
	preview.style.position = ""; preview.style.visibility = "";
	},
	//
	// This gets called when a key is pressed in the textarea.
	// We check if there is already a pending update and clear it if so.
	// Then set up an update to occur after a small delay (so if more keys
	// are pressed, the update won't occur until after there has been
	// a pause in the typing).
	// The callback function is set up below, after the Preview object is set up.
	//
	Update: function () {
	if (this.timeout) {clearTimeout(this.timeout)}
	this.timeout = setTimeout(this.callback,this.delay);
	},
	//
	// Creates the preview and runs MathJax on it.
	// If MathJax is already trying to render the code, return
	// If the text hasn't changed, return
	// Otherwise, indicate that MathJax is running, and start the
	// typesetting. After it is done, call PreviewDone.
	//
	CreatePreview: function () {
	Preview.timeout = null;
	if (this.mjPending) return;
	var text = document.getElementById("MathInput").value;
	if (text === "")
	{
	text = document.getElementById("MathInput").placeholder;
	}
	if (text === this.oldtext) return;
	if (this.mjRunning) {
	this.mjPending = true;
	MathJax.Hub.Queue(["CreatePreview",this]);
	} else {
	this.buffer.innerHTML = this.oldtext = text;
	this.mjRunning = true;
	MathJax.Hub.Queue(
	["Typeset",MathJax.Hub,this.buffer],
	["PreviewDone",this]
	);
	}
	},
	//
	// Indicate that MathJax is no longer running,
	// and swap the buffers to show the results.
	//
	PreviewDone: function () {
	this.mjRunning = this.mjPending = false;
	this.SwapBuffers();
	}
	};
	//
	// Cache a callback to the CreatePreview action
	//
	Preview.callback = MathJax.Callback(["CreatePreview",Preview]);
	Preview.callback.autoReset = true; // make sure it can run more than once
	Preview.Update();
	</script>
	<style>
	body, html{
	height:100%;
	padding: 0px;
	margin: 0px;
	}
	table
	{
	width: 100%;
	padding: 0px;
	margin: 0px;
	height: 100vh;
	overflow: hidden;
	}
	textarea
	{
	border: none;
	margin: 0px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	height: 99.5vh;
	color: #FFF;
	background-color: #222;
	font-size: 1.5em;
	font-family: "Courier", monospace;
	width: 100%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box;
	}
	tr,td
	{
	vertical-align: top;
	height: 100vh;
	overflow: auto;
	width: 50%;
	background-color: #FFF;
	padding: 0px;
	margin: 0px;
	}
	td#Input
	{
	background-color: #222;
	}
	td#Output{
	position: relative;
	}
	#MathBuffer
	{
	font-size: 1.5em;
	margin-top: 20px;
	height: 100vh;
	padding-left: 20px;
	padding-left: 20px;
	position: absolute;
	left: 0;
	top: 0;
	}
	#MathPreview
	{
	font-size: 1.5em;
	margin-top: 20px;
	height: 100vh;
	padding-left: 20px;
	padding-left: 20px;
	position: absolute;
	left: 0;
	top: 0;
	}
	</style>
	</head>
	<body>

	<table cellspacing="0" cellpadding="0">
	<tr>
	<td id=Input>
	<textarea
	placeholder="Try Euler's identity $e^{i \pi} + 1 = 0$ ..."
	id="MathInput" onkeyup="Preview.Update()">
	</textarea>
	</td>
	<td id=Output>
	<div id="MathPreview"></div>
	<div id="MathBuffer"></div>
	</td>
	</tr>
	</table>

	<script>
	Preview.Init();
	</script>

	</body>
	</html>