Code Editor - Real Helper

md.shakil hossain

1835

Code Editor

 <link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/theme/mbo.css">
<div id="cm">
  
</div>
<a href="#min" id='mtoggle'>&#9660;</a>
<div id="output"><iframe src="about:blank" width='100%' height='100%'frameborder="0"></iframe></div>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Try it Yourself >>

 @keyframes bg {
  0%, 100% {
    background:#866;
  }
  50% {
    background:#945;
  }
}
body {
  background:#945;
  animation:bg 60s infinite linear;
}
#cm {
  position:fixed;
  width:calc(50% - 10px);
  top:7px;
  left:10px;
  right:calc(50% - 7px);
  bottom:10px;
  padding:0;
  margin:0;
  box-sizing:border-box;
  /* border:solid 1px #aaa; */
  border-radius:5px;
  transition:all 0.5s ease;
  height:calc(100% - 17px)
}
#output {
  position:fixed;
  top:7px;
  right:10px;
  left:calc(50% + 10px);
  bottom:10px;
  padding:0;
  margin:0;
  background:#fff;
  border-radius:5px;
  box-sizing:border-box;
  transition:all 0.5s ease;
}
.CodeMirror {
  height:100% !important;
  border-radius:5px;
}
@media all and (max-width:750px) {
  #output {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:300px;
    border-radius:0 !important;
  }
  #cm {
    bottom:0;
    left:0;
    right:0;
    top:calc(100% - 300px);
    border-radius:0 !important;
    width:100%;
    height:300px;
  }
  #mtoggle {
    display:none !important
  }
}
.min #output {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:300px;
  border-radius:0 !important;
}
.min #cm {
  bottom:0;
  left:0;
  right:0;
  top:calc(100% - 300px);
  border-radius:0px !important;
  width:100%;
  height:300px;
}
#mtoggle {
  position:fixed;
  bottom:5px;
  right:5px;
  display:block;
  z-index:999;
  background:linear-gradient(#aaa,#888);
  padding:5px 10px;
  border-radius:5px;
  text-decoration:none;
  color:#111;
}
#mtoggle:active {
  box-shadow:0 0 15px inset
}

Try it Yourself >>

if (localStorage.content) {
  setval = localStorage.content;
} else {
  setval = '\n\n\n  \n  Document\n\n\n  \n\n'
}
var div = document.getElementById("cm"),
    editor = CodeMirror(div, {
      mode: 'htmlmixed',
      lineNumbers:true,
      theme:'mbo',
      value: setval
  });

function rc() {
  var output = document.querySelector("#output iframe");
  output.contentDocument.write(editor.getValue())
  output.contentDocument.close();
  localStorage.content = editor.getValue()
}
editor.on('change',function() {
  rc()
});
function checkmin() {
  if(location.hash == '#min') {
    $(document.body).addClass("min");
    $("#mtoggle").attr('href','#');
    $("#mtoggle").html('◄');
  } else {
    $(document.body).removeClass("min");
    $("#mtoggle").attr('href','#min');
    $("#mtoggle").html('▼');
  }
}
checkmin()
$("a").on("click",checkmin)

Try it Yourself >>