How can you embed a simple CODE EDITOR.

Today we’re going to embed an code editor in website.
I found a code editor called codemirror. which is lighter than monaco.

Embed VSCode single file editor in your website.

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

For features visit CodeMirror WebSite

Example

Example Explained

The easiest way to use CodeMirror is to simply load the script and style sheet , plus a mode script (Here I’m using JavaScript mode script). For example:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/mode/javascript/javascript.min.js"></script>

Then Create a dummy text box for your Editor

<textarea id="editor">
  your code here...
</textarea>

Having done this, an editor instance can be created like this:

let editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  mode:  "javascript"
});

Then enjoy it.

I hope to write more articles with advanced use cases of embedded editor.
Follow 🏃‍♂️ me for more articles.
Ask🙏 any question on comments section.
Star⭐ me if you love this article.

cover image by Unsplash

Happy Coding 👩‍💻👩‍💻👩‍💻…
Thanks. ❤️❤️❤️