Markdown to HTML converter using JavaScript, HTML and CSS
By Aditya PradhanHello everyone, In this tutorial you are going to learn how to create a Markdown to HTML converter using JavaScript.
Steps to create Markdown to HTML converter
Follow the following steps to create a Markdown to HTML converter web application
- In the first step create the HTML file named converter.html
- In the second step create the CSS file named converterstyle.css
- In the third step create the JavaScript file named converterjs.js
The purpose of JavaScript is to convert the markdown content to HTML format dynamically in the live runtime environment.
What is Markdown
Markdown is a simple language used to format the content in an organized form
What is the use of Markdown language?
The Markdown language uses simpler syntax and notations than HTML to reduce the complexity.
The Markdown language reduces the effort required to write the same content in HTML.
This language increases the efficiency of the user to read and write the content quickly and easily.
This is a simplified language version through which the user can understand the complex tags of the HTML language.
You can use the cheatsheet for Markdown language by clicking on the link https://www.markdownguide.org/cheat-sheet/
Steps to create the HTML file
Follow the following steps the create the HTML file
- In the first step open VS code and create a folder in which create a file named converter.html.
- In the next step create the boilerplate template to create the basic structure of the website.
The HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="converterstyle.css" />
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"
></script>
<title>Markdown to HTML converter</title>
</head>
<body>
<h1 id="headingone">Welcome everyone</h1>
<h2 id="headingtwo">Markdown to HTML converter</h2>
<div class="firstbox">
<h2 id="headingthree">Enter your input here</h2>
<textarea name="text" id="text"></textarea>
</div>
<div class="secondbox">
<h2 id="headingfour">The output</h2>
<textarea name="content" id="content"></textarea>
</div>
</body>
<script src="converterjs.js"></script>
</html>
- Create 2 script tags in the head section to import external JavaScript files.
This is because JavaScript files contain the inbuilt code that adds functionality to the webpage.
The 2 script tags are as follows
- <script src=”https://cdn.jsdelivr.net/npm/marked/marked.min.js”></script>
Use this JavaScript file which contains the marked.js function present in the JS library used to convert the Markdown content into HTML format.
- <script src=”https://code.jquery.com/jquery-3.7.1.js” integrity=”sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=” crossorigin=”anonymous” ></script>
This JS file i.e. jQuery library in the JS simplifies DOM manipulation in JS and makes it very easy to interact with HTML elements.
- In the webpage to take input and show output create textarea which is an HTML tag inside the div tag.
- The reason for textarea is that according to the size of the input it adjusts its size automatically.
- Also, add classes and IDs to the HTML tags to add styling to the webpage.
Steps to create the CSS file
Follow the following steps to create the CSS file
- In the same folder in the VS code create another file named converterstyle.css.
- Now link the HTML file to the CSS file
- Use the classes and IDs added to the HTML tags to add styling to the webpage
The CSS file
* {
background-color: rgb(86, 79, 79);
}
#headingone {
text-align: center;
}
#headingtwo {
text-align: center;
}
#headingthree {
margin-left: 11px;
}
#headingfour {
margin-left: 70px;
}
.firstbox {
margin-left: 43%;
}
#text {
height: 200px;
width: 240px;
border-width: 5px;
border-color: black;
border-radius: 5px;
background-color: rgb(167, 164, 164);
}
.secondbox {
margin-left: 43%;
margin-top: 5%;
}
#content {
height: 200px;
width: 240px;
border-width: 5px;
border-color: black;
border-radius: 5px;
background-color: rgb(167, 164, 164);
}
Markdown to HTML converter
Steps to create the JavaScript file
Follow the following steps to create the JS file to add functionality to the webpage
- In the same folder in the VS code create another file named converterjs.js.
- Now link the HTML file to the JavaScript file through the script tag used in the HTML file.
The JavaScript File
$(document).ready(function () {
$("#text").keyup(function () {
document.getElementById("content").value = marked.parse(
document.getElementById("text").value
);
});
});
- $(document).ready(function () {…….})
This code line defines that the code in the ready function will be executed when the HTML document is loaded completely.
This is because it will be easy to access the DOM object from HTML by using jQuery.
Here the DOM elements mean the HTML elements in which you can manipulate them in the JS by using jQuery.
- $(“#text”).keyup(function () {……..})
This code line selects the textarea with the ID named text, and then this ID is added with an event handler named keyup.
This is because this event handler will help to create a real-time Markdown to HTML converter.
- document.getElementById(“content”).value = marked.parse( document.getElementById(“text”).value);
The above code represents how the Markdown input value is converted into HTML format
- marked.parse( document.getElementById(“text”).value);
Use this equation which represents the DOM object i.e. textarea with the ID named text and then extract the value i.e. Markdown input.
Then use marked.js which is a JS library function to parse the extracted value and convert it into an HTML formatted document.
- document.getElementById(“content”).value
As use this code equation represents the textarea with an ID named content. This effectively shows the output of a converted HTML-formatted document.
Leave a Reply