DEV Community

Cover image for Fetch GitHub Markdown and Show on Blog Post or Website ft. showdownjs
Sh Raj
Sh Raj

Posted on Edited on

Fetch GitHub Markdown and Show on Blog Post or Website ft. showdownjs

Previous Post :- https://dev.to/sh20raj/convert-markdown-or-md-url-to-html-markdowntohtml-using-javascript-ft-showdownjs-1med
Video Documentation :- https://youtu.be/omtgsLp9hOI
Article Source :- https://codexdindia.blogspot.com/2022/01/convert-markdown-or-md-url-to-html-using-javascript.html


Convert a Markdown Containing URL to HTML and Show it.

For this we will Use fetch Api.
Here is the raw URL of showdownjs readme.md :- https://github.com/showdownjs/showdown/raw/master/README.md .

We will fetch content of this URL then convert it to HTML and show on our website. See Demo on Codepen.

<script src="https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js"></script>
<div id="mypost"></div>
<script>
fetch('https://raw.githubusercontent.com/showdownjs/showdown/master/README.md').then(response => response.text())
  .then(data => {
  console.log(data);
  var converter = new showdown.Converter();
var md = data;
var html = converter.makeHtml(md);
  document.querySelector('#mypost').innerHTML = html;
});
</script>
Enter fullscreen mode Exit fullscreen mode

See the result on Codepen :- https://codepen.io/SH20RAJ/pen/bGoyJqJ?editors=1010

Top comments (0)