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-markdow…

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>

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


Print Share Comment Cite Upload Translate
APA
Shaswat Raj | Sciencx (2024-03-28T22:03:11+00:00) » Fetch GitHub Markdown and Show on Blog Post or Website ft. showdownjs. Retrieved from https://www.scien.cx/2022/01/21/fetch-github-markdown-and-show-on-blog-post-or-website-ft-showdownjs/.
MLA
" » Fetch GitHub Markdown and Show on Blog Post or Website ft. showdownjs." Shaswat Raj | Sciencx - Friday January 21, 2022, https://www.scien.cx/2022/01/21/fetch-github-markdown-and-show-on-blog-post-or-website-ft-showdownjs/
HARVARD
Shaswat Raj | Sciencx Friday January 21, 2022 » Fetch GitHub Markdown and Show on Blog Post or Website ft. showdownjs., viewed 2024-03-28T22:03:11+00:00,<https://www.scien.cx/2022/01/21/fetch-github-markdown-and-show-on-blog-post-or-website-ft-showdownjs/>
VANCOUVER
Shaswat Raj | Sciencx - » Fetch GitHub Markdown and Show on Blog Post or Website ft. showdownjs. [Internet]. [Accessed 2024-03-28T22:03:11+00:00]. Available from: https://www.scien.cx/2022/01/21/fetch-github-markdown-and-show-on-blog-post-or-website-ft-showdownjs/
CHICAGO
" » Fetch GitHub Markdown and Show on Blog Post or Website ft. showdownjs." Shaswat Raj | Sciencx - Accessed 2024-03-28T22:03:11+00:00. https://www.scien.cx/2022/01/21/fetch-github-markdown-and-show-on-blog-post-or-website-ft-showdownjs/
IEEE
" » Fetch GitHub Markdown and Show on Blog Post or Website ft. showdownjs." Shaswat Raj | Sciencx [Online]. Available: https://www.scien.cx/2022/01/21/fetch-github-markdown-and-show-on-blog-post-or-website-ft-showdownjs/. [Accessed: 2024-03-28T22:03:11+00:00]
rf:citation
» Fetch GitHub Markdown and Show on Blog Post or Website ft. showdownjs | Shaswat Raj | Sciencx | https://www.scien.cx/2022/01/21/fetch-github-markdown-and-show-on-blog-post-or-website-ft-showdownjs/ | 2024-03-28T22:03:11+00:00
https://github.com/addpipe/simple-recorderjs-demo