Markdown Previewer

index.html

<link href='https://fonts.googleapis.com/css?family=Play&effect=neon' rel='stylesheet' type='text/css'>

<div class="container-fluid nopadding"> 
  <nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggle-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand font-effect-neon" target=_blank href="http://codepen.io/rfprod"><span class="glyphicon glyphicon-wrench"></span> RFProd</a>
    </div>
    <div class="collapse navbar-collapse" id="toggle-nav">
      <div class="container-fluid"> 
        <ul class="nav navbar-nav navbar-right font-effect-emboss">
          <li class="nav-tabs"><a href="#markdownpreviewer"><span class="glyphicon glyphicon-search"></span> MARKDOWN PREVIEWER</a></li>
          <li class="nav-tabs"><a href="https://gist.github.com/rfprod/7c96d7b39fbb892fb529" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a></li>
        </ul>
      </div>
    </div>

  </nav>
  <a name="markdownpreviewer"></a>
  <div class="home sect">
    <div class="container-fluid">
      <div class="col-md-12"> 
        <h2><img class="githublogo" src="https://cdn2.iconfinder.com/data/icons/significon-social/512/Significon-Github-512.png" alt=""> Markdown Previewer</h2>
        <textarea class="input" placeholder="type here, use markdown"></textarea>
        <div id="output"> 
          Output
        </div>
        <span class="credits">info <a href="https://en.wikipedia.org/wiki/Markdown" target=_blank>what is markdown</a><br>licence <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target=_blank>GPL 3.0</a></span>
      </div>
    </div>
  </div>
</div>

Markdown Previewer.markdown

Markdown Previewer

User can type GitHub-flavored Markdown into a text area and see a preview of the output of input that is updated as user types.

A Pen by V on CodePen.

License.

script.js

$(document).on('ready',function(){
  var markdownPreview = React.createClass({displayName: 'MarkdownPreview',
    render: function() {
      return (
        React.createElement('div', {className: "markdownPreview"},
          "Yup-yup, here previewer comes:"
        )
      );
    }
  });
  ReactDOM.render(
    React.createElement(markdownPreview, null),
    document.getElementById('output')
  );
  $('.markdownPreview').append(marked('# Marked in browser\n\nRendered by **marked**.'));
  $('textarea')[0].addEventListener('keyup', function(event){
    $('.markdownPreview').html(marked($(this).val()));
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>

style.css

$black: #000000
body
  color: $black
  font-family: 'Play', sans-serif
  font-size: 2.2em
  overflow-x:hidden
  .nopadding
    padding: 0
  .navbar-brand
    font-size: 1em
  .home
    min-height: 97vh
    height: auto !important
    margin-top: 0.95em
  .sect
    padding-top: 2vh
    .githublogo
      height: 1em
    h2
      text-align: center
      margin-top: 4vh
      font-weight: bold
    .input
      width: 100%
      resize: none
      min-height: 30vh
      height: auto !important
    #output
      text-align: center
      width: 100%
      height: auto !important
    .credits
      display: block
      text-align: center
      font-size: 0.75em
      a:hover
        text-decoration: none

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />