Line Numbers not rendering to gutter correctly.

Using Browserify.

If I toggle the included css being pointed to the numbers display correctly.

Like this: .CodeMirror-gutter-elt {left: -29px !important}

The line numbers display correctly, after I include the above line of css.

Possibly related areas of code: https://github.com/JedWatson/react-codemirror/blob/master/lib/Codemirror.js#L23 https://github.com/JedWatson/react-codemirror/blob/master/dist/react-codemirror.js#L677-L678 https://github.com/JedWatson/react-codemirror/blob/master/dist/react-codemirror.js#L1052-L1063

I was also having difficulties with getting extra themes to work as well, since the className was not being appended to the correct elements.

var Editor         = require('./codeeditorview/CodeMirror')
    editorConfig: {
        'mode': 'javascript',
        'theme': 'cm-s-monokai',
        'lineNumbers': true,
    },
<Editor config={ this.items.editorConfig }/>

./codeeditorview/CodeMirror’:

'use strict';
var Codemirror = require('react-codemirror');
var Editor = React.createClass({
    getInitialState: function() {
        return {
            code: 'function add(a, b) {\n' +
                  '  return a + b;\n' +
                  '}'
        };
    },
    updateCode: function(newCode) {
        console.log('From the editor',newCode)
        this.setState({
            code: newCode
        });
    },
    render: function() {
      var options = this.props.config
      return (
          <Codemirror value={this.state.code} onChange={this.updateCode} options={options} />
      )
    }
  });

// React.render(<App />, document.getElementById('app'));
module.exports = Editor

[Nicolewxyy]

Use refresh or autorefresh , I require autorefresh.js and set option autoRefresh to true solved it. For more details

[caiski]

Did you guys really solve this problem ?

I used autoRefresh: true and import 'codemirror/addon/display/autorefresh'; , wrong rendering still remains.