CodeMirror HTML mode not working

javascript syntax-highlighting codemirror
vitto picture vitto · Jul 12, 2013 · Viewed 30.1k times · Source

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?

Answer

Eliran Malka picture Eliran Malka · Jul 13, 2013

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.

Related questions

CodeMirror 2 - Highlight only (no editor)

Can CodeMirror 2 be used to highlight code from a DIV or PRE tag (without the editor)? Like CodeMirror 1 used to be able to do with the hightlightText() function? For example here: http://codemirror.net/1/highlight.html, after you press run …

Read More
CodeMirror . Disabling Vertical scroll bar

I am currently using CodeMirror to edit CODE in text area in browser. If i have more than 20 lines of code, it is adding a vertical scroll bar to right. But i do not need this scroll bar. Instead i …

Read More
CodeMirror Dynamic Syntax Validation

Been trying to decide between using CodeMirror or Ace editor. I've been leaning towards CodeMirror, however there's one feature of Ace that I really like and that is how it does syntax validation. So as I'm typing there can appear …

Read More