Markdown Previewer

In this example below you will see how to do a Markdown Previewer with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 11abdullah11, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 11abdullah11 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Markdown Previewer</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="row c">
  <div id = "in" class="form-group col-xs-5">
  <textarea id="input" onchange="myFunction(this.value)">
    Heading
=======

Sub-heading
-----------
 
### Another deeper heading
 
Paragraphs are separated
by a blank line.

Leave 2 spaces at the end of a line to do a  
line break

Text attributes *italic*, **bold**, 
`monospace`, ~~strikethrough~~ .

Shopping list:

  * apples
  * oranges
  * pears

Numbered list:

  1. apples
  2. oranges
  3. pears

The rain---not the reign---in
Spain.

 *[Herman Fassett](https://freecodecamp.com/hermanfassett)*

</textarea>
</div>
  <div class="col-xs-1"></div>
  <div id="content" class="well col-xs-5">
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/11abdullah11/markdown-previewer-gxgWWQ */
body{
}
#in{
  min-height:100px;
  margin:2%;
}
#input{
    width: 100%;
    font-size:20px;
    height: 500px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 8px;
}
.c{
  margin-top:5vh;
}
#content{
  font-size:18px;
  min-height:100px;
  max-height:500px;
  margin:2%;
  overflow: auto;
}

/*Downloaded from https://www.codeseek.co/11abdullah11/markdown-previewer-gxgWWQ */

$(document).ready(function () {
  var val = $("#input").val();
  document.getElementById('content').innerHTML = marked(val);
  $('#input').on('input', function () {
    var val = $("#input").val();
    document.getElementById('content').innerHTML = marked(val);
  });
});

Comments