TheEssem/MarkdownGistToWebpage.html

## MarkdownGistToWebpage.html
<!DOCTYPE html>
<html>
  <head>
    <title>Markdown Gist</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css">
    <style>
	    .markdown-body {
		    box-sizing: border-box;
		    min-width: 200px;
		    max-width: 980px;
		    margin: 0 auto;
		    padding: 45px;
	    }

	    @media (max-width: 767px) {
		    .markdown-body {
			    padding: 15px;
		    }
	    }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
    <script>
      fetch("https://gist.githubusercontent.com/budparr/9257428/raw/markdown-tutorial.md").then(function(response) { // put the URL to your raw gist here
        if (response.status !== 200) {
          console.log("Looks like there was a problem. Status Code: " + response.status);
          return;
        }
        response.text().then(function(text) {
	  var converter = new showdown.Converter();
	  converter.setFlavor("github");
          var html = converter.makeHtml(text);
          var markdownContainer = document.getElementById("markdown");
	  markdownContainer.removeChild(document.getElementById("loading"));
          markdownContainer.innerHTML = html;
	});
      }).catch(function(err) {
        console.error(err);
      });
    </script>
  </head>
  <body>
  <article class="markdown-body" id="markdown">
    <h1 id="loading">Loading...</h1>
  </article>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Markdown Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css">
	<style>
	.markdown-body {
	box-sizing: border-box;
	min-width: 200px;
	max-width: 980px;
	margin: 0 auto;
	padding: 45px;
	}

	@media (max-width: 767px) {
	.markdown-body {
	padding: 15px;
	}
	}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
	<script>
	fetch("https://gist.githubusercontent.com/budparr/9257428/raw/markdown-tutorial.md").then(function(response) { // put the URL to your raw gist here
	if (response.status !== 200) {
	console.log("Looks like there was a problem. Status Code: " + response.status);
	return;
	}
	response.text().then(function(text) {
	var converter = new showdown.Converter();
	converter.setFlavor("github");
	var html = converter.makeHtml(text);
	var markdownContainer = document.getElementById("markdown");
	markdownContainer.removeChild(document.getElementById("loading"));
	markdownContainer.innerHTML = html;
	});
	}).catch(function(err) {
	console.error(err);
	});
	</script>
	</head>
	<body>
	<article class="markdown-body" id="markdown">
	<h1 id="loading">Loading...</h1>
	</article>
	</body>
	</html>