Markdown Parser

by sjmcpherson

HTML

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.3.0/showdown.min.js"></script>
<link rel="stylesheet" href="https://sindresorhus.com/github-markdown-css/github-markdown.css">
<div class="markdown-body">
      <div id="tableOfConents"></div>
      <div id="contents"></div>
</div>

CSS

body{background-color:#fff;}
.markdown-body {
     box-sizing: border-box;
     min-width: 200px;
     max-width: 980px;
     margin: 0 auto;
     padding: 45px;
}
    
#contents h1{
  counter-reset: section;
}
#contents h2{counter-increment: section;counter-reset: article; }
#contents h2:before {
  content: counter(section) ".";
  margin-right:5px;
  font-weight:normal;
}
#contents h3:before {
  counter-increment: article;
  content:counter(section) "." counter(article);
  margin-right:5px;
  font-weight:normal;
}

JavaScript

var tableOfContents = $("#tableOfConents");
var contents = $("#contents");

var path = "https://raw.githubusercontent.com/sjmcpherson/Front-End-Developer-Learnings/master/"
$(".markdown-body").on("click","a", function() {
	var fullHref = $(this).attr('href');
  var fileIndex = fullHref.lastIndexOf("/");
  parseLoad(fullHref.substring(fileIndex+1, fullHref.length),contents);
  return false;
});
parseLoad("README.md", tableOfContents);
function parseLoad(file,el){
  $.ajax({
    url: path + file,
    context: document.body,
    success: function(mdText){
      //where text will be the text returned by the ajax call
      var converter = new showdown.Converter();
      var htmlText = converter.makeHtml(mdText);
      el.html(htmlText); //append this to a div with class outputDiv
    }
  });
}