Home
Blogger Guide
Coding Guide

How To Create Live HTML Code Editor Using HTML, CSS and Javascript

How To Create Live HTML Code Editor Using HTML, CSS and Javascript

Hi Friends, Let's see how to Create a Live HTML Code Editor Using HTML, CSS, and Javascript. HTML Code editor is a software tool. Used for web page or web development. That is, an HTML editor tool is used to create a web page or website and modify the code

All the web documents are written to the code before some text editor. In which HTML elements tags (such as header, body, paragraph, table, etc.) can be used.

If you are learning HTML. So I recommend you simple text editors like Notepad (for PC users.) and TextEdit (for Mac users) to learn HTML.

Once you've learned HTML, use a professional HTML code editor. Professional HTML editors, it automatically recommends HTML tags. This does not put too much pressure on your brain, due to which you will not remember HTML tags.

Let go...

In this Tutorial, I am Creating the Live HTML Source Code Editor literally Like that Codepen.

We are Using Three Types of Files for the Project

  • HTML  - for Markup
  • CSS - To give the style
  • JAVASCRIPT - For giving the Functions

First, I am making the three Textarea for users to enter the HTML, CSS, and Javascript. and, I Add One Iframe For showing the Compiled Results. it means I allocated the Iframe for showing the Result or Output. Finally, I add ID for all elements on the HTML. 

<div class=pixlP><input class="hidden tbIn"id=fTabs-1 name=postTabs type=radio checked> <input class="hidden tbIn"id=fTabs-2 name=postTabs type=radio> <input class="hidden tbIn"id=fTabs-3 name=postTabs type=radio><div class="scrlH tbHd"><label data-text=HTML for=fTabs-1></label> <label data-text=CSS for=fTabs-2></label> <label data-text=JAVASCRIPT for=fTabs-3></label></div><div class=tbCn><div class=tbText-1><a name=more></a> <textarea id=html placeholder="Type Your HTML"rows=10></textarea></div><div class=tbText-2><textarea id=css placeholder="Type Your CSS"rows=10></textarea></div><div class=tbText-3><textarea id=js placeholder="Type Your JAVASCRIPT"rows=10></textarea></div></div></div><br><div class=pixlP><h2 class=title>OutPut</h2><iframe id=code></iframe></div>

Make Style

Now we have finished the all markup on the HTML Elements. Now we are starting to make styling using CSS. we are styling all HTML code like textarea and Iframes Using the Below CSS File. 

<style type="text/css">
.pixlP{padding:16px 20px;background-color:#fefefe;box-shadow:0 5px 35px rgb(0 0 0/7%);border:0;border-radius:10px;font-size:14px} 
.drK .pixlP{background-color:#000;color:#fff;box-shadow:0 0 0;}.iframe {bottom: 0;position: relative;width: 100%;height: 35em;}
.sidebar {display:none;}
</style>

We hope this design is like to you. so, Feel free Now go to the Final Step...

Now code the Complie Function()

Now I am given the Project Function via Javascript. We give the Some function for the Active HTML Source Code Editor.

  • We are using html,css,js,and code Id's for the Compile this Project Function.

I am Using the Below Javascript for the make Compile Function on the  HTML Code Editor. 


<script type="text/javascript">
function compile(){var e=document.getElementById("html"),t=document.getElementById("css"),n=document.getElementById("js"),o=document.getElementById("code").contentWindow.document;document.body.onkeyup=function(){o.open(),o.writeln(e.value+"<style>"+t.value+"</style><script>"+n.value+"<\/script>"),o.close()}}compile();
</script>

Now all Works Are finished. This project is Pretty good. this is very similar to ver HTML Source Code Editor.

Live HTML Code Editor Source Demo Link

Click Here

Final Words

We hope this HTML SOURCE EDITOR PROJECT is very helpful to you. If you want more information like this please stay tuned to our blog.

Post a Comment