Codemirror syntax highlighting doesn't seem to work

[lucidlive]

First of all, thanks for putting the work into making CodeMirror work with React. I have it working great EXCEPT the syntax highlighting just doesn't work. I included the necessary library modes (ie: Javascript, PHP) and theme but the Syntax doesn't get highlighted. When I view the live DOM, I don't see any of the markdown that triggers the syntax colors (like cm-tag, etc...). Has anyone else experienced this?

[a-iasevoli]

up

[kumarharsh]

Yup, even I'm not getting it.

[a-iasevoli]

Are you using it with weback?
It seams that it isn't able to get the modes dependencies after the build.
I "solved" the problem by using the original Codemirror. For sure there is a better way to fix this, but I don't had the time to look at it.

[lucidlive]

Thanks for the response. Yeah, I am using Webpack. I'll look into it and if I figure anything out, I'll post a note :)

[kumarharsh]

Actually, I've got it working. In my case, it was because I was specifying mode as sql instead of text/x-sql. Although there is one bug with this library : the gutters become 100% of the width of the screen. I fixed this by calling this.codeMirror.refresh() in the componentWillReceiveProps() of the react-codemirror module

[pastelsky]

I am having the same problem. My dom looks like :

[joshbuckley182]

I had the same/similar issue, which was resolved by upgrading to npm 3.

I've got codemirror and react-codemirror as project dependencies.

Under npm 2, I had 2 copies of codemirror (my projects depenency, and react-codemirrors dependency), and under npm 3, it's shared in the node_modules root.

[redlolgeerf]

I'm using webpack and npm 3.3, this is how I got syntaxhighlight to work:
import CodeMirror from 'react-codemirror'
import 'codemirror/lib/codemirror.css'

[fooqri]

I had originally installed react-codemirror without codemirror (so code-mirror installed as a dependency), and syntax highlighting didn't work.

This worked for me:

1. npm uninstall react-codemirror
2. npm install --save codemirror
3. npm install --save react-codemirror

This way codemirror isn't installed also as a dependency under react-codemirror that may have slight version differences. Also noted I ended up with a newer codemirror (5.14.2), which could also have an impact.

[gunn]

Webpack and npm 2.14.12.
I had to make sure I was loading the same codemirror files as react-codemirror. So:

import Codemirror from 'react-codemirror'
import 'react-codemirror/node_modules/codemirror/mode/jsx/jsx'
import 'react-codemirror/node_modules/codemirror/lib/codemirror.css'

[tedwong]

Do anyone encounter similar issue?

1. My npm version: 4.0.2
2. I using webpack
3. In my JS:

import CodeMirror from 'react-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'

var options = {
    lineNumbers: true,
    readOnly: false,
    mode: "javascript"
};

<CodeMirror ref="editor" 
        value={this.state.code} 
        onChange={this.updateCode}
        options={options} 
        interact={this.interact}/>

What I get in the result, is there something I missing?:

[bengle]

I get this problem too.
Finally,import "https://codemirror.net/mode/javascript/javascript.js" this file,it works.

[gerrard00]

Building on what @bengle said, this worked for me:

import '../node_modules/codemirror/mode/javascript/javascript.js';

[iErik]

I'm still facing the same problem using even with all the solutions and the original CodeMirror,
I'm using the following packages:

npm v4.1.12
webpack v10.14.0
react v15.4.2
react-codemirror v0.3.0
codemirror v5.18.2
electron v1.14.15
webpack-dev-middleware v1.10.0
webpack-hot-middleware v2.16.1

I'm running the app in development server with hot realoading and nothing seems to work. The actual markdown.js file is being imported and it runs but it still doesn't work. Since I'm facing the same problem even after replacing react-codemirror with the vanilla CodeMirror instance, I believe this must be something related to Webpack itself.

[darklightblue]

@fooqri 's solution worked for me. thanks! cheers.
the pattern is:
I uninstalled codemirror, then uninstalled react-codemirror... then installed codemirror, then react-codemirror

[Bobcui001]

Here is my solution to fix this problem.
Install:

npm i --save-dev codemirror react-codemirror

Version:

 "codemirror": "^5.32.0", 
 "react-codemirror": "^1.0.0",

Code:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import CodeMirror from 'react-codemirror';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/lib/codemirror.css';

class CodeMirrorApp extends Component {
    constructor (props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            code: '{"state":1, "msg":"success"}',
        }
    }
    handleChange(newCode) {
        this.setState({code: newCode});
    }

    render() {
        const options = {
            lineNumbers: true,
            mode: 'javascript'
        };
        return(
            <div>
                <CodeMirror value = {this.state.code} onChange = {this.handleChange} options = {options}/>
                <div>
                    <h1>CodeMirror</h1>
                </div>
            </div>
        );
    }
}


ReactDOM.render(<CodeMirrorApp />, document.getElementById('root'));

The page will look like this:

May help you~

[shihua-guo]

In my case. Here is my solution to fix this problem. I am not using npm.

• import the loadmode.js

<script type="text/javascript" src="/addon/mode/loadmode.js"></script>

• set the mode and ,then load the mode

codeMirror.setOption("mode", "text/x-sql"); //this mode paramter is the mime type
CodeMirror.autoLoadMode(codeMirror,"sql");//this paramter is the js file name.

In this process you will found, it would request a js file which depend on the mode you pass in.

so if you lack these mode file,may result in highlight-not-working

I found this solution after I read the demo loadmode. 👍

[caginbektas]

I just wanted to resurrected this topic, I was suffering with this too. I wanted to share my solution to save the fellas as much as possible. I added those lines and it is solved.

import React from "react";
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/lib/codemirror.js'
import 'codemirror/mode/cobol/cobol'
import 'codemirror/theme/twilight.css'

Editor initializing:

let editor = CodeMirror.fromTextArea(document.getElementById("code"), {
       lineNumbers: true,
       matchBrackets: true,
       mode: "text/x-cobol",
       theme : "twilight"
});
editor.setValue(codeString);
editor.refresh();

[lancejpollard]

I am in the same boat, here I have JSON specified:

import { json } from '@codemirror/lang-json'

    <CodeMirror
      value={value}
      height={height}
      basicSetup={{
        lineNumbers: false,
        defaultKeymap: false,
        searchKeymap: false,
        historyKeymap: false,
        foldKeymap: false,
        completionKeymap: false,
        lintKeymap: false,
        syntaxHighlighting: true,
      }}
      theme={purple}
      extensions={[json()]}
    />

And I'm not seeing any syntax classes added to the DOM:

Any ideas what could be wrong? Just got a basic setup going with Next.js, the color overrides for the background and line highlights is working, just not the syntax highlighting.

[swash1]

@lancejpollard Hi! Did you solve this problem? Same here :(

upd: Updating @codemirror/lang-python to the latest version helped me (I needed python syntax highlight)