Создайте index.html с двумя разделами, один для редактора, один для вывода и одна кнопка для запуска кода.

<!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>

Добавьте этот скрипт в свой код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.14.0/ace.js"></script>
<script src="script.js"></script>

Первый скрипт предназначен для ACE (https://ace.c9.io/) — встраиваемой библиотеки редактора кода, которую мы будем использовать.

Давайте займемся дизайном в 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;
}

Теперь в 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;
}

Здесь мы создаем экземпляр редактора ace. Мы можем выбрать разные темы, и нам также нужно выбрать язык, используя session.setMode(), чтобы получить синтаксис intilisense.