Build a Fully Functional Online Code Editor using HTML, CSS & JS
2 min readJan 25, 2023
Create a index.html with two divs, one for the editor one for the output and one button to run the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>EliteCode-Editor</title>
</head>
<body>
<div id="editor"></div>
<div id="output"></div>
<button onclick="runCode()">Run</button>
</body>
</html>Add these script to you code :
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.14.0/ace.js"></script>
<script src="script.js"></script>The first script is for ACE (https://ace.c9.io/) which is a embeddable code editor library that we will be using.
Lets do some designing, in styles.css:
#editor {
width: 100%;
height: 500px;
border: 1px solid #ccc;
}
#output {
width: 100%;
height: 25%;
border: 2px solid black;
background-color: black;
color: white;
}
button {
padding: 10px 20px;
font-size: 16px;
margin-top: 20px;
background-color: green;
}Now, in the script.js:
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
function runCode() {
var code = editor.getSession().getValue();
try {
output = eval(code);
} catch (e) {
output = e.toString();
}
document.getElementById("output").innerHTML = output;
}Here we are creating an instance of ace editor. We can select form different themes and we also need to select language using session.setMode() to get the syntax intilisense.
