How to require mode, theme or addon of code mirror in browserify

Question

Has anybody try to use code mirror via browserify?

I find nothing is visible, even though it already generated all the html tags.

The code :

var CodeMirror = require('codemirror');
require('codemirror/mode/javascript/javascript.js');

  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    extraKeys: {
      "Ctrl-Space": "autocomplete"
    },
    mode: {
      name: "javascript",
      globalVars: true
    }
  });

i wonder how i should require the js mode?

Answer 1

I actually dealed with that problem by using require() for all dependencies of the demonstration of html5complete mode demo like that:

// require('codemirror/addon/hint/show-hint');
// require('codemirror/addon/hint/xml-hint');
// require('codemirror/addon/hint/html-hint');

require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/css/css');
require('codemirror/mode/htmlmixed/htmlmixed');

var CodeMirror = require('codemirror/lib/codemirror');

var editor = CodeMirror.fromTextArea(textareaElement, {
  mode: 'text/html',
  lineWrapping: true,
  extraKeys: {
    'Ctrl-Space': 'autocomplete'
  },
  lineNumbers: true,
  theme: 'monokai'
});

In my .less files, I imported the CSS like that:

@import (inline) "./../../node_modules/codemirror/lib/codemirror.css";
@import (inline) "./../../node_modules/codemirror/theme/monokai.css";
// @import (inline) "./../../node_modules/codemirror/addon/hint/show-hint.css";

I did not took really care about the quality of that trick.

Answer 2

Here's what's working for me. Using import instead of require, but same gist:

import 'codemirror/theme/3024-night.css'

const options = {
      lineNumbers: true,
      readOnly: false,
      mode: 'htmlmixed',
      theme:'3024-night'
};

...


<Codemirror ref="editor" value={this.props.value} onChange={this.props.updateCode} options={options}/>