javascriptcodemirrorcodemirror-modes

Using Codemirror twice on the same page (HTML and CSS) results in only one highlighting mode being applied

I have two textfields, one with HTML code and the other one with CSS code, but the mode for the CodeMirror (HTML-mode) applies for the entire page, so the CSS code simply isn't highlighted.

Link to Codemirrors CSS mode: Codemirror CSS Mode

I couldn't seem to find a solution in the Codemirror manual, this is all I found:

mode: string|object The mode to use. When not given, this will default to the first mode that was loaded. It may be a string, which either simply names the mode or is a MIME type associated with the mode. Alternatively, it may be an object containing configuration options for the mode, with a name property that names the mode (for example {name: "javascript", json: true}). The demo pages for each mode contain information about what configuration parameters the mode supports. You can ask CodeMirror which modes and MIME types have been defined by inspecting the CodeMirror.modes and CodeMirror.mimeModes objects. The first maps mode names to their constructors, and the second maps MIME types to mode specs

Link to the above info in Codemirrors manual

My textfield code and id's:

    <body>

<a id="header-text">You will be redirected to the page in 5 seconds...</a>

<textarea id='code2' name='code2'>
#demo_input {
    display: none;
}
body {
    background-color: #272822;
}
body > .CodeMirror {
    margin: auto;
    border: 1px solid #cccccc;
    width: 45%;
}
</textarea>

<textarea id="code" name="code">
&lt;html style="color: green"&gt;
  &lt;!-- this is a comment --&gt;
  &lt;head&gt;
    &lt;title&gt;HTML Example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    The indentation tries to be &lt;em&gt;somewhat &amp;quot;do what
    I mean&amp;quot;&lt;/em&gt;... but might not match your style.
  &lt;/body&gt;
&lt;/html&gt;
</textarea>
    </body>

Note: This is not my code, just a picture of how the website looks live, code is posted above.

enter image description here

Solution

  • I've created the following working example on a JSFiddle. Make sure to: