md-editor.html

<style type="text/css">
  #file{ visibility: hidden;}
  .e {
  position: absolute;
  top: 0;
  right: 50%;
  bottom: 0;
  left: 0;
 }
  .c {
  position: absolute;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  }

  #message {
  top: 1%;
  right: 0;
  position: fixed;
  /*border-bottom-left-radius: 5px;*/
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px 5px 5px 5px;
  width: 10%;
  height: 5%;
  min-width: 200px;
  -webkit-transition: opacity 0.2s ease-out;
  }
  #file-info {
      bottom: 1%;
  right: 0%;
  position: fixed;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px 5px 5px 5px;
  min-width: 200px;
  }

</style>
<input type="file" id="file"/>
<div class="e" id="editor"></div>
<div class="c"></div>
<div id="message">File: ~/src/code/md-editor.html.Saved file!</div>
<div id="file-info" >C-h to toggle help</div>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"> </script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="md-editor.js" type="text/javascript"></script>