Cacher is the code snippet organizer for pro developers

::-webkit-scrollbar {
  width: 12px
}
::-webkit-scrollbar-track {
  background-color: #fff;
  border-left: 1px solid #fff
}
::-webkit-scrollbar-thumb {
  background-color: #ccc
}
::-webkit-scrollbar-thumb:hover {
  background-color: #aaa
}
html, body {
  position: relative;
  height: 100%
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: relative;
  height: 100%;
  background: transparent
}
a {
  color: #0645ad;
  text-decoration: none;
}
a:visited {
  color: #0b0080;
}
a:hover {
  color: #06e;
}
a:active {
  color: #faa700;
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active {
  outline: 0;
}
p {
  margin: 1em 0;
}
img {
  max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  color: #111;
  line-height: 1em;
}
h4, h5, h6 {
  font-weight: bold;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 2em;
  border-bottom: 1px solid silver;
  padding-bottom: 5px;
}
h3 {
  font-size: 1.5em;
}
h4 {
  font-size: 1.2em;
}
h5 {
  font-size: 1em;
}
h6 {
  font-size: 0.9em;
}
blockquote {
  color: #666666;
  margin: 0;
  padding-left: 3em;
  border-left: 0.5em #EEE solid;
}
hr {
  display: block;
  height: 2px;
  border: 0;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #eee;
  margin: 1em 0;
  padding: 0;
}
pre, code {
  color: #000;
  font-family: monospace;
  font-size: 0.88em;
  border-radius: 3px;
  background-color: #F8F8F8;
  border: 1px solid #CCC;
}
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 5px;
}
pre code {
  border: 0px !important;
  background: transparent !important;
  line-height: 1.3em;
}
code {
  padding: 0 3px 0 3px;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
ul, ol {
  margin: 1em 0;
  padding: 0 0 0 2em;
}
li p:last-child {
  margin: 0
}
dd {
  margin: 0 0 0 2em;
}
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  vertical-align: top;
  padding: 4px 10px;
  border: 1px solid #bbb;
}
tr:nth-child(even) td, tr:nth-child(even) th {
  background: #eee;
}
.wrapper {
  margin: 0;
  padding: 0;
  display: block;
  box-sizing: border-box;
  background: #FFFFFF;
  height: 100%;
  width: 100%;
  border: 4px solid white;
  overflow: hidden
}
.bar {
  display: block;
  padding: 0;
  margin: 0;
  overflow: hidden;
  height: 30px
}
.close_window {
  text-decoration: none;
  font-family: verdana;
  color: rgb(35, 108, 238);
  float: right;
  margin-right: 5px;
  padding: 0;
  width: 20px;
  height: 20px;
  line-height: 2;
  display: block
}
#cke_editor-area {
  border: none;
  outline: none;
  box-shadow: none
}
.drag {
  display: inline-block;
  width: 96%;
  padding: 0;
  margin: 0;
  height: 30px;
  float: left
}
.inner {
  display: block;
  width: 100%;
  padding: 0;
  height: 96%;
  overflow: hidden
}
.editor-control {
  padding: 0.5em;
  background: #fff;
  border-bottom: 1px solid #E7E7E7
}
.editor-control a {
  color: #000;
  text-decoration: none;
  padding: 2px 5px;
  border-radius: 2px;
  margin: 0;
  display: inline;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease
}
.editor-control a:hover {
  color: #2F63E9;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease
}
.editor {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  background: #F7F7F7;
  height: 100%;
  overflow: hidden
}
.editor .editor-area {
  display: block;
  width: 96%;
  margin: 1%;
  padding: 1%;
  height: 89%;
  background: #FFF;
  border: none;
  overflow: auto;
  resize: none;
  color: #000;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5em;
}
.editor .editor-area:focus {
  outline-color: #C9C5C5
}
.result {
  position: absolute;
  top: 34px;
  left: 0;
  display: block;
  width: 96%;
  margin: 1%;
  padding: 1%;
  height: 90%;
  border: none;
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  background: #FFF;
  color: #6B6B6B;
  transition: all 1s ease
}
.result img {
  display: block;
  width: 100%
}
.show {
  visibility: visible !important;
  opacity: 1;
  transition: all 1s ease
}
.active {
  color: #2F63E9 !important
}
.custom-modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background-color: #FFF;
  background-color: rgba(255, 255, 255, 0.72)
}
.custom-modal {
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 9999;
  padding: 1.2em;
  width: 300px;
  margin-left: -150px;
  background-color: #FFFFFF;
  border: 1px solid #CACACA
}
.custom-modal-header {
  margin: -1.2em -1.2em 0;
  padding: 0.5em 0.7em;
  background-color: #F0F0F0;
  color: #B9B9B9;
  font-weight: normal
}
.custom-modal-content {
  margin: 1.2em 0
}
.custom-modal input, .custom-modal button {
  background-color: #F5F5F5;
  color: #A3A3A3;
  border: 1px solid #D3D3D3;
  padding: 5px
}
.custom-modal input {
  display: block;
  width: 96%
}
.custom-modal button {
  padding-right: 10px;
  padding-left: 10px;
  border-color: #DADADA;
  color: #9B9B9B;
  cursor: pointer;
  margin: 0 4px 0 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease
}
.custom-modal button:focus, .custom-modal button:hover {
  background-color: #FFFFFF;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease
}

(function() {
  String.prototype.capitalize = function(lower) {
    return (lower ? this.toLowerCase() : this).replace(/(?:^|\s)\S/g, function(a) {
      return a.toUpperCase();
    });
  };
  var myTextArea = _('#editor-area'),
      btn =   _('#editor-control')  .getElementsByTagName('a'),
      editor = new Editor(myTextArea),
      controls = {
        'bold': function() {
          editor.wrap('**', '**');
        },
        'italic': function() {
          editor.wrap('_', '_');
        },
        'code': function() {
          editor.wrap('`', '`');
        },
        'code-block': function() {
          editor.indent(' ');
        },
        'quote': function() {
          editor.indent('> ');
        },
        'ul-list': function() {
          var sel = editor.selection(),
              added = "";
          if (sel.value.length > 0) {
            editor.indent('', function() {
              editor.replace(/^[^\n\r]/gm, function(str) {
                added += '- ';
                return str.replace(/^/, '- ');
              });
              editor.select(sel.start, sel.end + added.length);
            });
          } else {
            var placeholder = '- List Item';
            editor.indent(placeholder, function() {
              editor.select(sel.start + 2, sel.start + placeholder.length);
            });
          }
        },
        'ol-list': function() {
          var sel = editor.selection(),
              ol = 0,
              added = "";
          if (sel.value.length > 0) {
            editor.indent('', function() {
              editor.replace(/^[^\n\r]/gm, function(str) {
                ol++;
                added += ol + '. ';
                return str.replace(/^/, ol + '. ');
              });
              editor.select(sel.start, sel.end + added.length);
            });
          } else {
            var placeholder = '1. List Item';
            editor.indent(placeholder, function() {
              editor.select(sel.start + 3, sel.start + placeholder.length);
            });
          }
        },
        'link': function() {
          var sel = editor.selection(),
              title = null,
              url = null,
              placeholder = 'Title of link';
          fakePrompt('Link title:', 'Title of link', false, function(r) {
            title = r;
            fakePrompt('URL:', 'http://', true, function(r) {
              url = r;
              editor.insert('\n[' + title + '](' + r + ')\n');
            });
          });
        },
        'image': function() {
          fakePrompt('Image URL:', 'http://', true, function(r) {
            var altText = r.substring(r.lastIndexOf('/') + 1, r.lastIndexOf('.')).replace(/[\-\_\+]+/g, " ").capitalize();
            altText = altText.indexOf('/') < 0 ? decodeURIComponent(altText) : 'Image';
            editor.insert('\n![' + altText + '](' + r + ')\n');
          });
        },
        'h1': function() {
          heading('#');
        },
        'h2': function() {
          heading('##');
        },
        'h3': function() {
          heading('###');
        },
        'h4': function() {
          heading('####');
        },
        'h5': function() {
          heading('#####');
        },
        'h6': function() {
          heading('######');
        },
        'hr': function() {
          editor.insert('\n\n---\n\n');
        },
        'undo': function() {
          editor.undo();
        },
        'redo': function() {
          editor.redo();
        }
      };

  function heading(key) {
    if (editor.selection().value.length > 0) {
      editor.wrap(key + ' ', "");
    } else {
      var placeholder = key + ' Heading ' + key.length + '\n\n';
      editor.insert(placeholder, function() {
        var s = editor.selection().start;
        editor.select(s - placeholder.length + key.length + 1, s - 2);
      });
    }
  }

  function click(elem) {
    var hash = elem.hash.replace('#', "");
    if (controls[hash]) {
      elem.onclick = function() {
        controls[hash]();
        return false;
      };
    }
  }
  for (var i = 0, len = btn.length; i < len; ++i) {
    click(btn[i]);
    btn[i].href = '#';
  }
  var pressed = 0;
  editor.area.onkeydown = function(e) {
    if (pressed < 5) {
      pressed++;
    } else {
      editor.updateHistory();
      pressed = 0;
    }
    if (e.keyCode == 9) {
      editor.indent('    ');
      return false;
    }
  };
  var c = new Showdown.converter(),
      e = _('#eye'),
      y = _('#editor-area'),
      o = _('.result'),
      w = _('.close_window'),
      d = _('.drag');
  e.onclick = function() {
    o.innerHTML = c.makeHtml(y.value);
    o.classList.toggle('show');
    this.classList.toggle('active');
  };

  // localStorage
  if (localStorage !== null) {
    y.value = localStorage.getItem('markdown_text_saved');
    var t = setInterval(function() {
      localStorage.setItem('markdown_text_saved', y.value);
      console.info('save text');
    }, 10000);
  } 

  function _(el){
    return document.querySelector(el);
  }
})();

<div class="wrapper">
  <div class="inner">

    <!-- apps here -->
    <div class="editor">
      <div class="editor-control" id="editor-control">
        <a href="#bold">Bold</a>
        <a href="#italic">Italic</a>
        <a href="#code">Code</a>
        <a href="#code-block">Code Block</a>
        <a href="#quote">Quote</a>
        <a href="#ul-list">
          <abbr title="Unordered List">UL</abbr>
        </a>
        <a href="#ol-list">
          <abbr title="Ordered List">OL</abbr>
        </a>
        <a href="#link">Link</a>
        <a href="#image">Image</a>
        <a href="#h1">H1</a>
        <a href="#h2">H2</a>
        <a href="#h3">H3</a>
        <a href="#h4">H4</a>
        <a href="#h5">H5</a>
        <a href="#h6">H6</a>
        <a href="#hr">Horizontal Rule</a>
        <a href="#undo">Undo</a>
        <a href="#redo">Redo</a>
        <a href="#" id="eye" title="Preview">Preview</a>
      </div>

      <textarea class="editor-area" id="editor-area" placeholder="Start here.."></textarea>
      <!-- result -->
      <div class="result"></div>
    </div>
  </div>

</div>