I am confused when I use require.js to load CodeMirror. Help!


I had read the offical manual, http://codemirror.net/doc/manual.html.

I had download the zip package from http://codemirror.net/codemirror.zip.


<!doctype html>
        <meta charset="utf-8">
        <link href="http://cdn.bootcss.com/codemirror/5.23.0/codemirror.min.css" rel="stylesheet">
        <script data-main="/requirejsdemo.js" src="http://cdn.bootcss.com/require.js/2.3.2/require.min.js"></script>
    <textarea id="textarea">
var aa = 'bb';

My requirejsdemo.js:

    packages: [{
        name: "codemirror",
        location: "/public/static/libs/codemirror/lib",
        main: 'codemirror'
        name: "mode_javascript",
        location: "/public/static/libs/codemirror/mode/javascript",
        main: 'javascript'

require(["codemirror", "mode_javascript"], function(CodeMirror) {

    CodeMirror.fromTextArea(document.getElementById("textarea"), {
        lineNumbers: true,
        mode: "javascript"


Now, the question is, lineNumbers: true is effective, but highlighting is invalid.

I don’t understand why.

There is nothing in Console.

I know my JS Code is diffent with the offical code from manual, but my code could running, and I can’t run the offical code, although I tried to modify the offical code to near my need.

Somebody good hearted people can help me? Please type the whole code at here or Codepen.io, thank you very much!


Here is what I’m doing. Hope could be useful to you:

  1. in the data-main file:

    baseUrl: “…”,
    paths: {
    “jquery”: “libs/jquery-3.3.1.min”, // 3.3.1

    packages: [{
    name: “codemirror”,
    location: “libs/codemirror-5.33.0”, // 5.33.0
    main: “lib/codemirror”

  2. Then in the module that uses CM:

    define([“jquery”, “codemirror”,
    ], function($, CodeMirror) {…}

And it works.
Hope it helps
P.S.: don’t understand why the code is so ugly and not formatted.