Using Codemirror twice on the same page (HTML and CSS) results in only one highlighting mode being applied
Question
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">
<html style="color: green">
<!-- this is a comment -->
<head>
<title>HTML Example</title>
</head>
<body>
The indentation tries to be <em>somewhat &quot;do what
I mean&quot;</em>... but might not match your style.
</body>
</html>
</textarea>
</body>
Note: This is not my code, just a picture of how the website looks live, code is posted above.
1 answers
solution1
3 ACCPTED 2017-02-19 12:46:51
I've created the following working example on a JSFiddle . Make sure to:
- Use the latest CodeMirror version.
- Include the following required javascript modules from CodeMirror:
- For CSS, just include
mode/css/css.js. - For HTML, include both
mode/htmlmixed/htmlmixed.js(HTML + CSS + JS) andmode/xml/xml.js(XML is required to parse HTML)
- For CSS, just include
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.