ngauthier/scratch.html

## scratch.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nick's Style Scratchpad</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
  }
  .editor, #output {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .editor {
    right: 66%;
  }
  #output {
    left: 35%;
  }
  .html {
    bottom: 50%;
  }
  .css {
    top: 50%;
  }
</style>
<style id="css" type="text/css">
</style>
</head>
<body>

<div class="editor css">css goes here</div>
<div class="editor html">markup goes here</div>
<div id="output">
</div>
<div class='clear'></div>

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
  $(function() {
    var $houtput = $("#output");
    var $coutput = $("#css");
    var $html   = $(".html");
    var $css    = $(".css");

    var css  = ace.edit($css[0]);
    var html = ace.edit($html[0]);

    var renderPreview = function() {
      var h = html.getValue();
      var c = css.getValue();
      $houtput.html(h);
      $coutput.html(c);
      localStorage.setItem("html-contents", h);
      localStorage.setItem("css-contents",  c);
    };

    css.setValue(localStorage.getItem("css-contents"));
    html.setValue(localStorage.getItem("html-contents"));

    css.getSession().setMode("ace/mode/css");
    html.getSession().setMode("ace/mode/html");

    for(i in [css, html]) {
      var editor = [css, html][i];
      editor.getSession().setUseWrapMode(true);
      editor.getSession().setUseSoftTabs(true);
      editor.on("change", renderPreview);
    }

    renderPreview();
  });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Nick's Style Scratchpad</title>
	<style>
	html, body {
	margin: 0;
	padding: 0;
	}
	.editor, #output {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}
	.editor {
	right: 66%;
	}
	#output {
	left: 35%;
	}
	.html {
	bottom: 50%;
	}
	.css {
	top: 50%;
	}
	</style>
	<style id="css" type="text/css">
	</style>
	</head>
	<body>

	<div class="editor css">css goes here</div>
	<div class="editor html">markup goes here</div>
	<div id="output">
	</div>
	<div class='clear'></div>

	<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
	<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
	<script>
	$(function() {
	var $houtput = $("#output");
	var $coutput = $("#css");
	var $html = $(".html");
	var $css = $(".css");

	var css = ace.edit($css[0]);
	var html = ace.edit($html[0]);

	var renderPreview = function() {
	var h = html.getValue();
	var c = css.getValue();
	$houtput.html(h);
	$coutput.html(c);
	localStorage.setItem("html-contents", h);
	localStorage.setItem("css-contents", c);
	};

	css.setValue(localStorage.getItem("css-contents"));
	html.setValue(localStorage.getItem("html-contents"));

	css.getSession().setMode("ace/mode/css");
	html.getSession().setMode("ace/mode/html");

	for(i in [css, html]) {
	var editor = [css, html][i];
	editor.getSession().setUseWrapMode(true);
	editor.getSession().setUseSoftTabs(true);
	editor.on("change", renderPreview);
	}

	renderPreview();
	});
	</script>
	</body>
	</html>