Codemirror with Vue 2 : Setup

Codemirror 6+ is not compatible with vue 2.7 and below, so we'll be using Codemirror 5 which is quite easy to setup with Vue 2

• First we'll install codemirror 5 using npm or yarn like this:

npm install codemirror@5.65

yarn add codemirror@5.65

• Then we'll create a new file (lets say, CodeEditor.vue)

• Then inside template we'll add textarea tag with id and v-model... Something like this:
  

<template>
  <textarea v-model="code" id="codeEditor"></textarea>
</template>

<script>
export default {
   data(){
     return {
        code:'console.log("hello world")',
     }
   }
}
</script>

• Then we'll import codemirror into the file and update the textarea to codemirror... also don't forget to import css file from codemirror as it is required

• Also import a mode (like here we are importing javascript) as it will be responsible for language styling according to the type of language
  (I have also added how you should add mode in configuration options further down)
  

<script>
import * as Codemirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'

export default {
   data(){
     return {
        code:'console.log("hello world")',
     }
   },
   mounted(){
      Codemirror.fromTextArea(document.getElementById('codeEditor'), {

            lineNumbers: true,
            line: true,
            tabSize: 4,
            mode: 'text/javascript',

        })
   }
}

• That's it you have successfully integrated Codemirror to Vue 2

Now let's add some basic customizations

• Let's first add a theme for the codeEditor
• For dracula 🧛🏻 theme, import this theme using following import statement:

import 'codemirror/theme/dracula.css'


• Then add theme in configuration options like this:

      Codemirror.fromTextArea(document.getElementById('codeEditor'), {

            lineNumbers: true,
            line: true,
            tabSize: 4,
            mode: 'text/javascript',
            theme: 'dracula',

        })
   }

• There are many themes that you can choose from... I'll recommend you to go to node_modules > codemirror > theme folder here you'll find all the themes that you can apply.

Now lets find out how to add correct mode value in configuration options

• You should go to node_modules > codemirror > mode folder, here you'll find all the languages that can be added.

• You should know that for C, C++, Java and few more languages you need to import clike... like this:
  import 'codemirror/mode/clike/clike.js'


• But the way these modes are added to configuration options are different.

For example if you want to add C to your codemirror then you'll need to add this to your configuration options:

Codemirror.fromTextArea(document.getElementById('codeEditor'), {

            lineNumbers: true,
            line: true,
            tabSize: 4,
            mode: 'text/x-csrc',
            theme: 'dracula',

        })

Now let's see how you'll know which is the right value for mode:

• First open this link on new tab: link to Codemirror 5

• Here you'll find all the different languages supported by codemirror 5

• Find your language, in our case click on ' C, C++, C# '

• Here you'll find the mode value you need to use at bottom of the page

There are still many more customizations that you can do, like adding 'autoCloseBrackets' functionality to your codemirror.

For that I'll add another post and add its link: here