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 used for my first blogging site.
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 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." Open your text editor and type the following inside
We are done with our function. Remember, this is only basic, we can make it more cool but for now, let’s keep it simple.
We created a function called
ide which takes four (4) parameters. The parameters are
language, lineNumbers, readOnly, theme. 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 read-only 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
"programming 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.
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">.