Selmy44 / Online-Code-Editor2

Online Code Editor pro 2

<title>Online Code Editor</title> <style> body { margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh; }

#editor {
  flex: 1;
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/javascript/javascript.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/htmlmixed/htmlmixed.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/css/css.js"></script> <script> // Initialize CodeMirror var editor = CodeMirror(document.getElementById("editor"), { mode: "htmlmixed", lineNumbers: true, theme: "dracula" // You can choose a different theme }); // Sample code to populate the editor var initialCode = ` <title>My HTML Page</title> <style> body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; } </style>

  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      alert('Welcome to the Online Code Editor!');
    </script>
  </body>
  </html>
`;

editor.setValue(initialCode);

// You can use the editor.getValue() to get the code entered by the user

</script>

About

Online Code Editor pro 2

Languages

Language:HTML 100.0%