Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 21, 2022 05:47 am GMT

Convert Markdown or md URL to HTML - MarkdownToHTML - Using JavaScript ft. showdownjs

Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber and Aaron Swartz created Markdown in 2004 as a markup language that is appealing to human readers in its source code form. Wikipedia

Video Documentation :- https://youtu.be/omtgsLp9hOI
Article Source :- https://codexdindia.blogspot.com/2022/01/convert-markdown-or-md-url-to-html-using-javascript.html

Using Markdown you will write(code) less and get more(static content).
Code given below are basic JavaScript Codes. Easy to Understand you can modify it and make the functions more dynamic.

We will Use - showdownjs to do so :- https://github.com/SH20RAJ/markdowntohtml

Here is the code you can use to change your markdown to HTML and show the html on your Website.

<script src="https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js"></script><div id="mycontent"></div><script>var converter = new showdown.Converter();var md = '[**Showdown**](http://www.showdownjs.com) is *great*
' + 'because:

' + ' - it\'s easy to use
' + ' - it\'s extensible
' + ' - works in the server and in the browser';var html = converter.makeHtml(md); document.querySelector('#mycontent').innerHTML = html;</script>

See the Result Here :-

Showdown is great because:

  • it's easy to use
  • it's extensible
  • works in the server and in the browser

To Know more about showdownjs functions Visit GitHub or I will embed the markdown of GitHub here using the following code.

Pro Tip :- Instead of Writing Code of MD in Js or Js Variable.
-> write the Markdown Inside a div
-> Make a variable and get the inner text of the div into it.
-> Convert the md to html using showdown and
change the innerHTML of that div to the new generated 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


Original Link: https://dev.to/sh20raj/convert-markdown-or-md-url-to-html-markdowntohtml-using-javascript-ft-showdownjs-1med

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To