Using Multiple Instances of CodeMirror In A File

Introduction

CodeMirror is a text editor which is implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of languages modes and addons that implement more advanced editing functionality.
It includes a rich programming API and a CSS theming system which allows you to configure it to fit your needs.
CodeMirror is a very good text editor for browsers, besides, it's what I use for my blog.

• An instance of CodeMirror works on only a single element.
• An instance of CodeMirror works on the id tag of a textarea
• Configuring it is a bit complicated.

Since am a programmer 😎, I try to make everything easy.
In this blog post, we are going to learn how to instantiate CodeMirror without using it's "complicated" configurations. We will create our own simple function which will call CodeMirror internally.
Do note that our function is going to be simple but if you want more control, you can modify it to fit your needs.

Creating our JavaScript function which will call CodeMirror internally

So like I said, we are going to create our JavaScript function which will call CodeMirror internally, the reason is that, we don't want to remember CodeMirror's "complicated" configuration. So what should we call our function? 🤔.
Let's call our function's name "ide". Yeah, just three letters, we don't want a complicated name. Before we start, let's look at some common configurations which we can set.
The language, whether to show line numbers, theme, whether the editor should be read only. So create a new JavaScript file and let's start coding.

We are done with our function. Remember, this is only basic, we can make it more cool but for today, let's keep it simple.
So let me explain what I did.

Using the function in our web page

So now, we are going to use the function we just created. We are going to create an HTML file and implement the function in it.

Ladies and gentlemen, let me do you the honour of explaining this code to you. We created a simple html file, then we initiated it with the necessary html tags. Now the first script tag imports codemirror's javascript file. Please remember that this file should be imported first.
Then on the next line, which is the link tag, we imported CodeMirror's style sheet. This is important for the colouring of your text.
These two files we have imported are the basic files required to run CodeMirror.

Then on the next line, which is a script tag, we imported a file called "script.js", this is the file in which we defined our function.
Then to the next line which is also a script tag, this script imports the python mode for the editor, remember this line will depend on the language you are using, if your editor is going to be in javascript, you will import the javascript file, or if python and javascript, you will import both. It actually depends on your language.
So we are kind of done, in order to use CodeMirror, you need to write your code in a textarea element.

So I created a textarea element and then wrote my python code inside. Notice I added a class called python to the textarea, this will help our function to identify the textarea.
Getting to the end of the body tag, we created another script tag, inside the script tag, we just wrote ide("python"). This is the code which is going to turn the textarea into an editor. Yeah, it's just one line. Even, if we were to have multiple textareas with class of python, this single line of code will convert them all into editors. When we were created our function, we said it takes four parameters right? Yeah it works without them because they are set by default but if you want more control, you can add the parameters.

Let's say if you want to remove the line numbers, we will write ide("python", lineNumbers = false) or if we wanted to make our editor read-only, we can write our parameters as ide("python",lineNumbers = true, readOnly = True) or better still, if we wanted to add a theme, we can write the parameters as ide("python", lineNumbers = true, readOnly = False, theme = "dracula").Note that, if we set a theme, we must import the theme which we set, so for a text editor with a theme of dracula, we will add this to our head element <link type="text/css" rel="stylesheet" href="codemirror/theme/dracula.css".

So we are done, see how our function saved us from writting many CodeMirror lines of code? Besides, that's the function powering all the code editors on this blog 🆒.
Also, you can launch many editors in one webpage, for example, it is possible to do ide("javascript");ide("python");ide("htmlmixed"); and it will work if you have imported the mode files for all these languages.
If you are to look at the source code for this web page, you will find out that am using two lines to power the two code editors. You will find these two codes ide("javascript");ide("htmlmixed") and that is what is making you view these editors. If you have any problem, please feel free to write it in the comment section and if you have better ideas to improve the function, am all ears.

A little cheatsheet

A little cheetsheet showing the files required to run an editor for these languages

<script type="text/javascript" src="codemirror\lib\codemirror.js"></script>
<script type="text/javascript" src="codemirror\mode\javascript\javascript.js"></script>
<link rel="stylesheet" type="text/css" href="codemirror\lib\codemirror.css">
                            

<script type="text/javascript" src="codemirror\lib\codemirror.js"></script>
<script type="text/javascript" src="codemirror\mode\python\python.js"></script>
<link rel="stylesheet" type="text/css" href="codemirror\lib\codemirror.css">
<link rel="stylesheet" type="text/css" href="codemirror\theme\twilight.css">  
                            

<script type="text/javascript" src="codemirror\lib\codemirror.js"></script>
<link rel="stylesheet" type="text/css" href="codemirror\lib\codemirror.css">
<script type="text/javascript" src="codemirror\mode\htmlmixed\htmlmixed.js"></script> 
<script type="text/javascript" src="../styling/codemirror/mode/xml/xml.js"></script>