Friends, In this article we are going to make our own code editor and trying to answer how to build a code editor? you must have heard about the code editor which is specially designed which provides the typing of source code simple and means that the programmer can easily create and edit the programming language. The compilers, interpreters, debuggers, or other programs for the development process also provide a convenient way to run.
To make a code editor, we need computer languages such as HTML, CSS, JavaScript, Java, Python, C, C++. It is important to have knowledge of Code editors are designed using some similar computer language. So in this article, we will create a live code editor using HTML, CSS, and JavaScript programming languages.
Create Live Code Editor step by step
So, First of all, we have to create 3 files 1. HTML file for markup, CSS for applying a style, and third JS file for the functions. You can also write all codes in a single file.
In the Html file, we have to need three textarea tags to take code inputs. The first textarea tag is used for the Html code. second for CSS code And third for JS code.
And iframe tag to insert an HTML document. The iframe is an inline frame in which we can show the preview of any website on our website, for this we use the iframe tag.
<!DOCTYPE html>
<html>
<head>
<title>Code Editor</title>
</head>
<body>
<div class="code-area">
<table>
<tr>
<td><textarea id="htmlCode" placeholder="html code"
oninput="showpreview()"></textarea></td>
<td><textarea id="CSSCode" placeholder="CSS Code"
oninput="showpreview()"></textarea></td>
<td><textarea id="JSCode" placeholder="javascript Code"
oninput="showpreview()"></textarea></td>
</tr>
</table>
</div>
<div class="preview-area">
<iframe id="preview-window"></iframe>
</div>
</body>
</html>
Now we will create a CSS file to apply different styles to the elements. you can apply any design according to you.
// css File
<style> *{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
height: 100vh;
}
.code-area{
display: flex;
flex-direction: column;
width: 100%;
border-right: 1px solid #555;
}
.code-area textarea{
resize: none;
outline: none;
width: 100%;
height: 59vh;
font-size: 18px;
color: white;
padding: 10px;
background-color: #2B2929;
}
.code-area table div tr td{
height: 100%;
}
.preview-area iframe {
width: 100%;
height: 40%;
border:none;
background-color: white;
bottom: 0;
}
</style>
After that, we created a JS file to create functions.
<script type="text/javascript">
function showpreview(){
var htmlCode = document.getElementById("htmlCode").value;
var CSSCode = "<style>"+document.getElementById("CSSCode").value+"
</style>";
var JSCode = "<scri"+"pt>"+document.getElementById("JSCode").value+"
</scri"+"pt>";
var frame = document.getElementById("preview- window")
.contentWindow.document;
frame.open();
frame.write(htmlCode+CSSCode+JSCode);
frame.close();
}
</script>
Output Images
In the below image, We have written the code of HTML, CSS, and JS and you can see its output below.
You can write any HTML code according to yourself and see its output on the same webpage.
On the first Textarea, we have written HTML code, on the second Textarea we have written CSS code so that we can make the HTML document look attractive.
With the help of CSS, we can modify the background color, text font style, etc, and give an attractive look.
After the CSS code, we have written the code of JS on the last textarea, in which we have created a function name changeH1 () which changes the heading as soon as we click on the button.
In this way, we have created a live code editor using some programming languages.
If you also want to make your own live code editor, then you can create with the help of this article, I hope that you like this article. If you liked this article, then do not forget to share and comment.
You May Also Like:–
