Editor code syntax highlighting in EasyMDE (ex SimpleMDE)

EasyMDE is editor used by Hinty. It is fork by Jeroen Akkerman of great SimpleMDE library which is not maintained since May 2017.

There is a default option for code syntax highlighting inside of preview (renderingConfig.codeSyntaxHighlighting), but this post will explain how to enable syntax highlight inside of editor itself😎

EasyMDE is based on another library called CodeMirror which supports a lot of language modes. Basically only markdown mode is included in EasyMDE to help with Markdown editing.

To enable code syntax inside of editor we need to include some of these modes. Main issue that it makes result bundle easymde.min.js more heavy (e.g. after I added several modes size changed from 300 KB to 520 KB). Thats why it is hard decision to include all modes for library and ship in default package which is widely used by everyone, thats why if we want to support syntax highlight we will need to recompile it by ourselfs. You can try syntax highlighting HERE

Lets do it.

1. Make fork of https://github.com/Ionaru/easy-markdown-editor to your GitHub account and pull repo to computer

2. Open file easymde.js, find find line:

var marked = require('marked/lib/marked');

Add requires of modes that you want to include:

// other modes for syntax hl
require('codemirror/mode/javascript/javascript.js');
require('codemirror/mode/python/python.js');
require('codemirror/mode/htmlmixed/htmlmixed.js');
require('codemirror/mode/php/php.js');
require('codemirror/mode/ruby/ruby.js');
require('codemirror/mode/sass/sass.js');
require('codemirror/mode/shell/shell.js');
require('codemirror/mode/sql/sql.js');
require('codemirror/mode/stylus/stylus.js');
require('codemirror/mode/swift/swift.js');
require('codemirror/mode/xml/xml.js');
require('codemirror/mode/yaml/yaml.js');
require('codemirror/mode/vue/vue.js');
require('codemirror/mode/rust/rust.js');
require('codemirror/mode/protobuf/protobuf.js');
require('codemirror/mode/perl/perl.js');
require('codemirror/mode/pascal/pascal.js');
require('codemirror/mode/nginx/nginx.js');
require('codemirror/mode/jsx/jsx.js');
require('codemirror/mode/jinja2/jinja2.js');
require('codemirror/mode/http/http.js');
require('codemirror/mode/go/go.js');
require('codemirror/mode/diff/diff.js');
require('codemirror/mode/django/django.js');
require('codemirror/mode/dockerfile/dockerfile.js');
require('codemirror/mode/css/css.js');
require('codemirror/mode/cmake/cmake.js');

3. Compile dist package by npm run prepare. Your fill will be at dist/easymde.min.js

Final step - add css to your project

.CodeMirror-line span.cm-keyword {color: #708;}
.CodeMirror-line span.cm-atom {color: #219;}
.CodeMirror-line span.cm-number {color: #164;}
.CodeMirror-line span.cm-def {color: #00f;}
.CodeMirror-line span.cm-variable {color: black;}
.CodeMirror-line span.cm-variable-2 {color: #05a;}
.CodeMirror-line span.cm-variable-3 {color: #085;}
.CodeMirror-line span.cm-property {color: black;}
.CodeMirror-line span.cm-operator {color: black;}
.CodeMirror-line span.cm-string {color: #a11;}
.CodeMirror-line span.cm-string-2 {color: #f50;}
.CodeMirror-line span.cm-meta {color: #555;}
.CodeMirror-line span.cm-error {color: #f00;}
.CodeMirror-line span.cm-qualifier {color: #555;}
.CodeMirror-line span.cm-builtin {color: #30a;}
.CodeMirror-line span.cm-bracket {color: #997;}
.CodeMirror-line span.cm-tag {color: #170;}
.CodeMirror-line span.cm-attribute {color: #00c;}
.CodeMirror-line span.cm-hr {color: #999;}

How to install it with npm install

You might want to publish built package to npm or just install from GitHub. The second option is simpler:

Create a new branch git checkout -b npm
In .gitignore file remove dist/ line to commit the dist/ folder
Commit files (also, always better to update version in package.json if you used EasyMDE before)
in your npm project do npm i --save git+https://github.com/<yourusername>/easy-markdown-editor.git#npm

You can also use our repo:

npm i --save git+https://github.com/devforth/easy-markdown-editor.git#npm

Try it HERE

syntax highlighting in EasyMDE