How to make a code editor in JavaScript

Question

Apu June 03, 2023 › #css › #HowTo

❌

How to make a code editor in JavaScript

If you want to create your own html code editor, then after reading this article, you will able to create a code editor. In this article, I am going to share a simple online code editor.

Example of code editor

<style>

* {

box-sizing: border-box;

}

.container {

text-align: center;

}

.container textarea, .container iframe {

margin: 10px auto;

padding: 10px 8px;

width: 100%;

height: 260px;

box-shadow: 0 0 5px rgba(0,0,0,.4);

border-radius: 5px;

}

.container textarea:hover {

outline: none;

}

.container button {

padding: 7px 15px;

border-radius: 50px;

box-shadow: 0 4px 5px rgba(150,228,9,.4);

}

</style>

<!DOCTYPE html>

<html>

<body>

<p>

This is a paragraph.

</p>

<p>

This is a paragraph.

</p>

<p>

This is a paragraph.

</p>

</body>

</html>

</textarea>

</div>

function run() {

document.getElementById('preview').contentWindow.document.body.innerHTML = document.getElementById('editor').value;

}

</script>

Write Your Answer

Apu · Accepted Answer · 2023-06-03T07:47:30+05:30

If you want to create your own html code editor, then after reading this article, you wil…