Markdown Previewer

index.html

<div class="page">
    <header>
      <h1>Hello I'm The Header</h1>
    </header>
   <div class="content">
     <div class="input-area">
       fffff
     </div>
     <div class="preview-area">
       ffffff
     </div>
  </div>
  </div>

markdown-previewer.markdown

Markdown Previewer

A Pen by Rane on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>

style.scss

@import "compass";
@import "susy";
@import "compass/layout/stretching";

/* Changing Susy default global settings */
$susy: (
  /* Tells Susy to use 12 columns */
  columns: 12,
  /* Tells Susy that the container has a max-width of 1120px */
  container: 80%,
  /* Tells Susy to use border-box */
  global-box-sizing: border-box 
  );

/* Makes border-box properties */
@include border-box-sizing;

header {
  height: 20vh;
  background-color: #CCC;
}

.content {
  
}

// Grid stuff

.page {
  @include container;
}

.content {
  .input-area {
    @include span(first 6)
  }
  .preview-area {
    @include span(last 6)
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />