JedWatson / react-codemirror

Codemirror Component for React.js
MIT License
1.55k stars 262 forks source link

[ Question ] Doesn't show up anything ( blank ), is my configuration wrong ? #59

Open iroy2000 opened 8 years ago

iroy2000 commented 8 years ago

This is my first time using it and trying to setup a basic version in order for it to show up, the following is my setup, let me know if I did something wrong, thanks.

import React, { PropTypes } from 'react';
import { default as CodeMirror } from 'react-codemirror';
require('codemirror/mode/javascript/javascript');

const codeTypes = {
  javascript: 'var welcome = {\n\tmode: "javascript"\n};'
};

And the following is the render function

  render() {
    const props = this.props;
    const options = {
      lineNumbers: true,
      readOnly: false,
      mode: 'javascript'
    };

    return (
        <div>
          <CodeMirror
            ref="editor"
            value={props.code}
            onChange={this.updateCode}
            options={options}
            interact={this.interact}
          />
        </div>
    );
  }

And I do see the code generated, but my screen is blank, am I missing something ?

screen shot 2016-08-14 at 11 11 48 pm
kavun commented 8 years ago

You need to include the .css from

./node_modules/codemirror/lib/codemirror.css
timmarinin commented 8 years ago

Probably should be mentioned right in the README.md