Thursday, September 28, 2023
HomeFun With ProgrammingCreating Live Code Editor Using HTML, CSS, and JS

Creating Live Code Editor Using HTML, CSS, and JS

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.

add-textarea - how to make code editor in html - RKR Knowledge
<!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 style - how to make code editor in css - RKR Knowledge
// 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.

create-js -function - how to make a code editor in javascript - RKR Knowledge
<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.

Creating Live Code Editor - RKR Knowledge

You can write any HTML code according to yourself and see its output on the same webpage.

Live Code Editor - RKR Knowledge

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.

css-style - Live COde Editor - RKR Knowledge

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.

create-js-function - Live Code Editor - RKR Knowledge

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:–

Priya Chauhan
Priya Chauhanhttps://rkrknowledge.com/
Hi 👋, Myself Priya Chauhan from India. Content Editor | Coder | PHP Developer | UI Designer. I try to learn something new every day and share that knowledge with my friends.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Stay Connected

33FansLike
60FollowersFollow
520SubscribersSubscribe

Most Popular

Recent Comments