How To Make A Custom Code Editor Using JAVASCRIPT

A Responsive Custom Code Editor created with HTML, CSS, and JAVASCRIPT it is made by Coding Vlogs Youtube Channel. you can download the source code or copy the source code and use it for free. if you have not subscribed to our youtube channel so subscribe now we are creating a beautiful coding project and provide source code for free. For Download Source Code Scroll Down ↓

<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css">
</link>

<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js">
</script>

Once you import CodeMirror cdn With <script> tag, you get a CodeMirror global that you can use to create a new CodeMirror project. Just point it at a <div> and CodeMirror does the rest.

CodeMirror(document.querySelector('#my-div'), {
  lineNumbers: true,
  tabSize: 2,
  value: 'console.log("Hello, World");'
});

below is what the above CodeMirror looks as if while you run it. it is a stay example so please tinker with it. observe that CodeMirror routinely supports shortcuts like "undo", so if you kind and then hit Ctrl + Z, it's going to undo your modifications.

Themes and Syntax Highlighting Using CodeMirror

The above CodeMirror works, however, it's far a bit ugly. allow's add JavaScript syntax highlighting so CodeMirror doesn't render the JavaScript code as simple text. To permit JavaScript syntax highlighting, first, you want to import the JavaScript language mode, that is a separate document:

<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js">
</script>

You Can Find More Theme On codemirror.net or Click Here My Favorite Theme Is Ayu Dark

You also need to set the mode option to JavaScript in your Project.

CodeMirror(document.querySelector('#my-js'), {
  lineNumbers: true,
  tabSize: 2,
  value: 'console.log("Hello, World");',
  mode: 'javascript'
});

Add Custom Theme Using Code Mirror Theme

Next, let's add a CodeMirror theme. Here's a full list of built-in themes for CodeMirror. For example, using the Ayu Dark Or Monokai theme you can make your CodeMirror look like Sublime Text.

First You Need To Link Your Theme With Your Project

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/monokai.min.css">

Next, just set the theme option to the CodeMirror Script

CodeMirror(document.querySelector('#monokai'), {
  lineNumbers: true,
  tabSize: 2,
  value: 'console.log("Hello, World");',
  mode: 'javascript',
  theme: 'monokai'
});

For Make A Code Runner In Iframe While Clicking A Button

// Button Preview Function
document.querySelector("#run-btn").addEventListener("click", function(){
  let htmlCode = htmlEditor.getValue();
  let cssCode = "" + cssEditor.getValue() + "";
  let jsCode = "" + jaEditor.getValue() + "";
  let previewWindow = document.querySelector("#preview-window").contentWindow.document;
  previewWindow.open();
  previewWindow.write(htmlCode+cssCode+jsCode);
  previewWindow.close();
});

For Create A Code Editor Like Code Pen

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Coding Vlogs</title>
  <link rel="stylesheet" type="text/css" href="https://codemirror.net/lib/codemirror.css">
  <script src="https://codemirror.net/lib/codemirror.js"></script>
  <script src="https://codemirror.net/mode/xml/xml.js"></script>
  <script src="https://codemirror.net/mode/css/css.js"></script>
  <script src="https://codemirror.net/javascript/javascript.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="header">
  <button class="run-btn" id="run-btn">Run</button>
</div>

<div class="editor">
  <div class="code">
    <div class="html-code"></div>
    <div class="css-code"></div>
    <div class="js-code"></div>
  </div>
  <div class="preview">
    <iframe id="preview-window"></iframe>
  </div>
</div>

<script src="main.js"></script>

</body>
</html>

Style (CSS)

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header{
  width: 100%;
  height: 50px;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header button{
  padding: 10px 20px;
  background: #f5f5f5;
  color: #111;
  font-size: 16px;
  font-weight: 600;
  border: none;
  outline: none;
  border-radius: 6px;
  cursor: pointer;
}

.editor{
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
}

.editor .code{
  width: 500px;
  border-right: 1px solid #888;
}

.editor .code > div{
  width: 100%;
  height: 33.33%;
  border-bottom: 1px solid #888;
}

.editor .preview{
  width: calc(100% - 500px);
  height: 100%;
}

.editor .preview iframe{
  width: 100%;
  border: none;
  height: 100%;
  outline: none;
}

.CodeMirror{
  height: auto;
}

JavaScript

// HTML Text Area
const htmlEditor = CodeMirror(document.querySelector(".editor .code .html-code"),{
  lineNumbers: true,
  tabSize: 4,
  mode:"xml"
});

// CSS Text Area
const cssEditor = CodeMirror(document.querySelector(".editor .code .css-code"),{
  lineNumbers: true,
  tabSize: 4,
  mode:"css"
});

// JavaScript Text Area
const jsEditor = CodeMirror(document.querySelector(".editor .code .js-code"),{
  lineNumbers: true,
  tabSize: 4,
  mode:"javascript"
});

// Button Preview Function
document.querySelector("#run-btn").addEventListener("click", function(){
  let htmlCode = htmlEditor.getValue();
  let cssCode = "";
  let jsCode = "" + jaEditor.getValue() + "";
  let previewWindow = document.querySelector("#preview-window").contentWindow.document;
  previewWindow.open();
  previewWindow.write(htmlCode+cssCode+jsCode);
  previewWindow.close();
});

Coding Vlogs

How To Make A Custom Code Editor Using JAVASCRIPT | Coding Vlogs