How to Create Custom Code Editor using JavaScript
Hi to all, in this article I am going to tell you all how to create your own custom live code editor by using pure JavaScript easily in just few minutes.
So, read the below provided steps carefully and completely to get clear understanding about creating custom live code editor by using pure JavaScript without any error or issue.
What does code editor do actually?
Mainly code editors are the tools, typically used by all programmer's and web developer's to write and edit code.
They are used for developing software and apps as well as other web development purposes.
Steps to create custom code editor using JavaScript
Follow the below provided steps carefully to create your own live code editor by using HTML, CSS and Pure JavaScript:
- First of all you have to open any default code editor like Notepad, VS code etc.
- Create a folder with a name as "Code_Editor_Project".
- Inside the folder, you have to create "index.html" file.
- And create a new file "style.css" inside the same project folder.
- Again create a file "script.js" inside the same project folder.
- Now add code according to the files as given below.
- Successfully created your custom code editor.
Adding HTML Code
First of all you have to open index.js file from the folder.
Add the below provided HTML code inside the file.
Now save the index.js file after adding the HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="code-editor">
<button id="run_pro">Run</button>
<div class="container">
<textarea id="input_wrap" placeholder="Code Editor"></textarea>
<iframe id="fram_wrapper"></iframe>
</div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
Adding CSS Code
Here you have to open style.css file from the folder.
Add the below provided CSS code inside the file.
Now save the style.css file after adding the CSS code.
*,*:after,*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: arial;
font-size: 16px;
margin: 0;
background: #393737;
color: #000;
display: flex;
align-items: center;
min-height: 100vh;
}
.code-editor{
padding: 30px;
width: 100%;
}
.container{
width: 100%;;
display: flex;
align-items: center;
justify-content: space-between;
}
#input_wrap,
#fram_wrapper{
padding:10px 15px;
height: 400px;
width: 48%;
border: 5px solid #5a5a5a;
background: #fff;
display: block;
}
#input_wrap{
resize: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
outline: 0
}
#run_pro{
padding: 15px;
width: 150px;
display: block;
margin: 0 auto 30px;
text-align: center;
font-size: 20px;
border: 0;
cursor: pointer;
background-color: #009e6d;
color: #fff;
border-radius: 30px;
}
Adding JavaScript Code
Now you have to open script.js file from the folder.
Add the below provided JavaScript code inside the file.
Now save the script.js file after adding the JavaScript code.
var run_pro = document.getElementById('run_pro');
run_pro.addEventListener('click',()=>{
input_wrap =document.getElementById('input_wrap').value;
document.getElementById('fram_wrapper').contentWindow.document.body.innerHTML ="";
document.getElementById('fram_wrapper').contentWindow.document.write(input_wrap);
})
You have successfully created your own custom code editor using HTML, CSS and JavaScript codes.
Demo
Conclusion
I hope that you have understood about creating custom code editor using HTML, CSS and JavaScript like codepen in just few minutes.
If you ran into an issue then please ask your query through our contact page.
