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


#1

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

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

My HTML:

<!doctype html>
<html>
    <head>
        <title>DEMO</title>
        <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>
    </head>
    <body>
    <textarea id="textarea">
var aa = 'bb';
    </textarea>
    </body>
</html>

My requirejsdemo.js:

require.config({
    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!


#2

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

  1. in the data-main file:

    requirejs.config({
    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”,
    “codemirror/mode/markdown/markdown”,
    “codemirror/addon/fold/foldgutter”,
    “codemirror/addon/fold/foldcode”,
    “codemirror/addon/fold/markdown-fold”,
    “codemirror/addon/edit/continuelist”,
    “codemirror/addon/display/fullscreen”,
    “codemirror/addon/display/autorefresh”
    ], function($, CodeMirror) {…}

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