Как создать редактор Try It: несколько методов с примерами кода

Чтобы создать редактор «Попробуй», вы можете использовать различные методы в зависимости от ваших требований и предпочтений. Вот несколько популярных подходов с примерами кода:

  1. HTML, CSS и JavaScript:

    • HTML: создайте HTML-страницу с областью редактора кода и областью результатов.
    • CSS: Оформите редактор и области результатов по своему вкусу.
    • JavaScript: используйте JavaScript для захвата ввода пользователя, его выполнения и отображения результата в режиме реального времени.

    Пример кода:

    <!DOCTYPE html>
<html>
<head>
 <style>
   #editor {
     height: 200px;
     width: 100%;
   }
   #result {
     height: 200px;
     width: 100%;
     border: 1px solid black;
     padding: 10px;
     white-space: pre-wrap;
   }
 </style>
</head>
<body>
 <textarea id="editor" oninput="runCode()"></textarea>
 <pre id="result"></pre>
 <script>
   function runCode() {
     const code = document.getElementById('editor').value;
     const result = eval(code);
     document.getElementById('result').innerText = result;
   }
 </script>
</body>
</html>

  2. Использование CodeMirror:

    • CodeMirror – популярная библиотека JavaScript, предоставляющая универсальный редактор кода с подсветкой синтаксиса и другими функциями.

    Пример кода:

    <!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/javascript/javascript.min.js"></script>
</head>
<body>
 <textarea id="editor"></textarea>
 <pre id="result"></pre>
 <script>
   const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
     lineNumbers: true,
     mode: 'javascript'
   });
   editor.on('change', function () {
     const code = editor.getValue();
     const result = eval(code);
     document.getElementById('result').innerText = result;
   });
 </script>
</body>
</html>

  3. Использование онлайн-редактора кода:

    • Другой вариант — встроить на свою веб-страницу существующий онлайн-редактор кода, например CodePen или JSFiddle.

    Пример кода:

    <!DOCTYPE html>
<html>
<body>
 <iframe src="https://codepen.io/pen/" ></iframe>
</body>
</html>