Simple Markdown Editor

index.html

<!--[if lt IE 8]>
          <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
      <![endif]-->

      <!-- Add your site or application content here -->
      <div class="container fullheight">
        <h1>Markdown Editor</h1>
        <div class="row">
          <div class="six columns">
            <textarea id="smde" class="CodeMirror"></textarea>
          </div>
          <div class="six columns reader" id="write_here">
          </div>
        </div>
      </div>

script.js

var sample = [
  "### Instructions",
  "Enter text in the area on the left. For more info, click the ? (help) icon in the menu."
]

var simplemde = new SimpleMDE({element: $("#smde")[0], toolbar: ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "|", "guide"]});

$(document).ready(function() {
  writeSample();
  simplemde.codemirror.on("change", function(){
    var renderedHTML = simplemde.options.previewRender(simplemde.value());
    $("#write_here").html(renderedHTML);
    $("#write_here").css("height", $(".row").height() +  "px" );
  });
});

function writeSample() {
  var s = "";
  s = getSample();
  simplemde.value(s);
  var renderedHTML = simplemde.options.previewRender(simplemde.value());
  $("#write_here").html(renderedHTML);
  $("#write_here").css("height", $(".row").height() +  "px" );
}

function getSample() {
  var s = "";
  $.each(sample, function( index, value ) {
  //alert( index + ": " + value );
    s = s + value + "\n\r";
});
  return s;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.js"></script>

simple-markdown-editor.markdown

Simple Markdown Editor

Free Code Camp: simple markdown editor challenge.

A Pen by Rob Welan on CodePen.

License.

style.css

html, body {
  height: 100vh;
}

.fullheight {
  height: 100%;
  max-height: 100vh;
}

.CodeMirror {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #bbb;
  border-radius: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 4px;
}

.editor {
  height: 100%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.2/codemirror.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet" />