browser. It is specialized for editing code, and comes with a number of
languages modes and addons that implement more advanced editing
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.
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.
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.
idewhich takes four (4) parameters. The parameters are
language, lineNumbers, readOnly, theme. Let me explain, the language parameter refers to the programming language which you want to use. lineNumbers refers to whether the editor should show line numbers, it's set to true by default. readOnly parameter is to specify whether the text editor should be readonly or not, it's set to false by default. The theme refers to the theme which you want to use for your text editor, it's set to default by default.
Inside the function, we create a variable called
textareas. It's an array containing elements with class name "your language". Then we iterate through the elements and create CodeMirror instances for each element and apply the parameters to the instance.
See, that was easy!!!
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
We created a simple html file, then we initiated it with the necessary
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.
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
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
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
||HTML, CSS, JS||