gistfile1.js

HTML:
// Input
<span id="editable-math"  class="mathquill-editable" ></span></p>
//Latex Code not shown to user
<p><textarea id="latex-source" style="display:none;"></textarea></p>
// Button to convert input to image
<p><button id="codecogs">Render LaTeX as an image with Code Cogs</button> <a id="codecogslink"><img id="codecogsimg" alt="LaTeX rendered as an image"> </a></p>
-----------------------------------------------------------------------------------------------------------------------
Javascript:

$('#show-html-source').toggle(function() {
  $(this).html('Hide Semantically Meaningful HTML Source').parent().next().show();
}, function() {
  $(this).html('Show Semantically Meaningful HTML Source').parent().next().hide();
});

var latexMath = $('#editable-math'), latexSource = $('#latex-source'), htmlSource = $('#html-source'), codecogsimg = $('#codecogsimg'), codecogslink = $('#codecogslink');

$('#codecogs').click(function() {
  var latex = latexSource.val();
  codecogsimg.attr('src','http://latex.codecogs.com/gif.latex?'+latex);
h});

$(function() {
  latexMath.bind('keydown keypress', function() {
    setTimeout(function() {
      var latex = latexMath.mathquill('latex');
      latexSource.val(latex);
//      location.hash = '#'+latex; //extremely performance-crippling in Chrome for some reason
      htmlSource.text(printTree(latexMath.mathquill('html')));
    });
  }).keydown().focus();