June 20, 2020

Create Your Own HTML Compiler or Editor

You can create your own HTML compiler or editor where you can write your html code and run it to get result.To create HTML compiler you should know simple HTML, CSS, and JavaScript.

CSS Design

Here simple CSS is using to add some design in the page.

textarea,
iframe {
    border: 2px solid black;
    height: 500px;
    width: 100%;
}
 
button {
    padding: 12px 12px;
    border: 1px solid black;
    border-radius: 20px 20px 20px 20px;
    width: 200px;
}
 
button:hover {
    background-color: #ffe680;
}

Add this code inside <Style> tag.

Simple HTML Body

There is simple HTML code written.

body>
    <div style="border :10px solid #ffe680;">
        <br>
        <center>
            <button onclick="runcode();"><b>Run</b></button>
        </center>
        <table width="100%" border="0" callspacing="5" callpadding="5">
            <br>
 
            <tr>
                <td width="50%" scope="col"> </td>
                <td width="50%" scope="col" align="left">
 
                </td>
            </tr>
            <td>
                <form>
                    Code:
                    <textarea name="sourcecode" id="sourcecode">
 
                    </textarea>
                </form>
            </td>
            <td>Output :
                <iframe name="targetcode" id="targetcode"></iframe>
            </td>
        </table>
    </div>

JavaScript Code

Finally add Javascript code in page.

<script>
    function runcode() {
        var content = document.getElementById('sourcecode').value;
        var iframe = document.getElementById('targetcode');
        iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument) ?
            iframe.contentDocument.document : iframe.contentDocument;
 
        iframe.document.open();
        iframe.document.write(content);
        iframe.document.close();
        return false;
    }
runcode(); </script>

ombine the code and you will receive an HTML editor or compiler where you can write your HTML code and run it.

The Ouput will be like :

See the Pen PoPjQRY by Manish Gupta (@mg9650043) on CodePen.

Click on RUN PEN to get code output.

Add your feedback and comment if you face any problem in this.

Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *