qoh/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>LaTeX Editor</title>

    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
      }

      html, body, #container {
        height: 100%;
      }

      #container     { display: flex; }
      #container > * { flex: 1; }

      #source {
        padding: 8px;
        overflow-y: scroll;
        resize: none;
        border: none;
        background: #111;
        color: #ccc;

        font-family: "Source Code Pro", monospace;
        font-size: 14px;
      }

      #source:focus { outline: none; }
      #output   { background: white; }
    </style>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro&subset=latin,latin-ext">
  </head>
  <body>
    <div id="container">
      <textarea id="source" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
      <div id="output"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js"></script>

    <script>
(function() {
  "use strict";

  var source = document.getElementById("source");
  var output = document.getElementById("output");

  source.addEventListener("input", function(e) {
    try {
      katex.render(source.value, output, {
        displayMode: true,
        throwOnError: false
      });
    } catch (error) {
      output.textContent = error.message;
    }
  });
})();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>LaTeX Editor</title>

	<style>
	* {
	box-sizing: border-box;
	}

	body {
	margin: 0;
	}

	html, body, #container {
	height: 100%;
	}

	#container { display: flex; }
	#container > * { flex: 1; }

	#source {
	padding: 8px;
	overflow-y: scroll;
	resize: none;
	border: none;
	background: #111;
	color: #ccc;

	font-family: "Source Code Pro", monospace;
	font-size: 14px;
	}

	#source:focus { outline: none; }
	#output { background: white; }
	</style>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro&subset=latin,latin-ext">
	</head>
	<body>
	<div id="container">
	<textarea id="source" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
	<div id="output"></div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js"></script>

	<script>
	(function() {
	"use strict";

	var source = document.getElementById("source");
	var output = document.getElementById("output");

	source.addEventListener("input", function(e) {
	try {
	katex.render(source.value, output, {
	displayMode: true,
	throwOnError: false
	});
	} catch (error) {
	output.textContent = error.message;
	}
	});
	})();
	</script>
	</body>
	</html>