Code Sample

HTML

<!-- This is an example of the above, you can read this, but it is not needed for `!--` -->
<span class="result result-template">
  //=> unknown
</span>
<code>
  <span class="code">
    x = [enter a number here]
  </span><br>
  <span class="code">
    !--x
  </span><br>
  <span class="code">
    x
  </span><br>
</code>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

CSS

span.result.error {
  display: block;
  color: red;
}
.code {
  min-width: 10px;
}

JavaScript

/* This is an example of the above, you can read this, but it is not needed for !-- */
var template = $('.result-template').hide(),
  code = $('span.code');
code.attr('contenteditable', 'true').each(function(i, e) {
  template.clone().removeClass('result-template').insertAfter(e);
});
interactive();
function interactive(code){
  $('span.code').keydown(function(e){
    if((e.keyCode || e.which) == 13){
      var _this = $(this);
      _this.clone().html("").insertAfter(_this.next().next())
        .show().focus().after(
        template.clone().removeClass('result-template').show()
      ).next().after('<br>')
      interactive();
      e.preventDefault();
    }
  }).keyup(function(e) {
    var error = false,
      context = {}
    if((e.keyCode || e.which) != 13){
      code.each(function() {
        var _this = $(this),
          res = _this.next().show().removeClass('error');
        try {
          with(context) {
            res.html(error ? "" : "  //=> " + eval(_this.text()))
          }
        } catch (e) {
          error = e;
          res.html("  Error: " + error.message).addClass('error');
        }
      })
    }
  })
}
$.fn.reduce = [].reduce;