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*\n' +
         'because:\n\n' +
         ' - it\'s easy to use\n' +
         ' - it\'s extensible\n' +
         ' - 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

And One More option is to use this framework of showdownjs :- https://github.com/cs905s/md-in-blogger

To Add like this way

      <pre class="markdown">
      #Woo hoo!
      [Markdown](http://daringfireball.net/projects/markdown/) is cool!
      ```

javascript
          // Verify code highlighting
          if (today==rainy) {
            return false;
          }


      ```
      </pre>