在同一页面上使用 Codemirror 两次（HTML 和 CSS）导致仅应用一种突出显示模式

Question

我有两个文本字段，一个带有 HTML 代码，另一个带有 CSS 代码，但是 CodeMirror 的模式（HTML-模式）适用于整个页面，因此 CSS 代码根本没有突出显示。

Link 到 Codemirrors CSS 模式：Codemirror CSS Mode

我在 Codemirror 手册中似乎找不到解决方案，这就是我找到的所有内容：

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

我的文本字段代码和 ID：

    <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>

注意：这不是我的代码，只是一张现场图片，上面贴了代码。

Answer 1

我在 JSFiddle 上创建了以下工作示例。确保：

使用最新的 CodeMirror 版本。
包括来自 CodeMirror 的以下必需 javascript 模块：
- 对于CSS，只需包含mode/css/css.js。
- 对于HTML，包括mode/htmlmixed/htmlmixed.js（HTML + CSS + JS）和mode/xml/xml.js（需要XML来解析HTML)

在同一页面上使用 Codemirror 两次（HTML 和 CSS）导致仅应用一种突出显示模式

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

javascript

codemirror

codemirror-modes