CodeMirror HTML mode not working

Question

I'm trying to style code samples with CodeMirror, but it works partially - it applies the selected theme to the textarea but the syntax is not highlighted.

There is my page:

<textarea id="template-html" name="code" class="CodeMirror">
    <!DOCTYPE html>
    <foobar>
        <blah>Enter your xml here and press the button below to display it as highlighted by the CodeMirror XML mode</blah>
        <tag2 foo="2" bar="bar" />
    </foobar>
</textarea>
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/codemirror.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/ambiance.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/solarized.css">
<script type="text/javascript" src="/site.com/js/libs/codemirror/codemirror.js"></script>
<script type="text/javascript" src="/site.com/js/libs/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript">
    var config, editor;

    config = {
        lineNumbers: true,
        mode: "text/html",
        theme: "ambiance",
        indentWithTabs: false,
        readOnly: true
    };

    editor = CodeMirror.fromTextArea(document.getElementById("template-html"), config);

    function selectTheme() {
        editor.setOption("theme", "solarized dark");
    }
    setTimeout(selectTheme, 5000);
</script>

Here is an image of the result. It seems to work but without the syntax highlighting (image top), I've also tried without my CSS, but the result is the same (image bottom):

codemirror html mode

The problem is with mode: "text/html" which seems to be not working properly, if I use mode: "javascript" it colorizes the tags by the JavaScript syntax rules. How can I fix this?

Eliran Malka · Accepted Answer · 2013-07-17T22:19:50.380

67

CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.

Add its dependency in your markup:

<script type="text/javascript" 
        src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>

and set the mode to xml:

config = {
    mode : "xml",
    // ...
};

In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:

config = {
    mode : "xml",
    htmlMode: true,
    // ...
};

See the XML/HTML mode demo for a live example.

edited Jul 17 '13 at 22:19

answered Jul 13 '13 at 18:20

Eliran Malka

15,821
6
77
100

1

Yeah, I was missing a lot of files, but you've gave me the right way: – vitto Jul 15 '13 at 15:32
i suggest you [have a read on the website](http://codemirror.net) and get to know CodeMirror a little better. – Eliran Malka Jul 15 '13 at 19:32
I have a similar problem to the OP, except that I am trying to use the Velocity mode. I have imported the xml script, but the auto close doesn't want to work anyway. Do you happen to know whether the Velocity should or not honor autoCloseTags setting by design? – user776686 Nov 09 '16 at 08:19

score 0 · Answer 2 · answered Apr 27 '20 at 12:52

Just in case if my experience can be helpful to someone.

I did following mistake:

<script src="lib/codemirror.js"></script>
<script type="text/javascript">
    const editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
        mode: "css",
        lineNumbers: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
        lint: true
    });
</script>
<script src="addons/lint/lint.js"></script>
<script src="addons/lint/css-lint.js"></script>
<script src="addons/fold/brace-fold.js"></script>
<script src="addons/fold/foldcode.js"></script>
<script src="addons/fold/foldgutter.js"></script>
<script src="addons/fold/indent-fold.js"></script>
<script src="addons/fold/markdown-fold.js"></script>
<script src="mode/css.js"></script>
<script src="//unpkg.com/csslint@1.0.5/dist/csslint.js"></script>

This is wrong: I called first codemirror.js - main file, then initialized Editor and later called its assets. In this case it didn't work and it took time for me to find the issue (I was doing it in WordPress so I just made my script depend on codemirror.js only).

score 0 · Answer 3 · answered May 19 '22 at 06:51

<script>
window.onload = function() {
var editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
        mode: "text/css",
        lineNumbers: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
        lint: true
    });
}
</script>

CodeMirror HTML mode not working

3 Answers3

Linked