An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To