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

Question

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

链接到Codemirror CSS模式： Codemirror CSS模式

我似乎在Codemirror手册中找不到解决方案，这就是我发现的全部内容：

模式：string | object要使用的模式。 如果未指定，则默认为已加载的第一个模式。 它可以是一个字符串，可以简单地命名模式，也可以是与该模式关联的MIME类型。 或者，它可以是一个包含该模式的配置选项的对象，该对象的名称属性为该模式命名（例如{name：“ javascript”，json：true}）。 每种模式的演示页面都包含有关该模式支持的配置参数的信息。 您可以通过检查CodeMirror.modes和CodeMirror.mimeModes对象来询问CodeMirror已定义了哪些模式和MIME类型。 第一个将模式名称映射到其构造函数，第二个将MIME类型映射到模式规范

链接到Codemirrors手册中的上述信息

我的文本字段代码和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需要XML）

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-02-19 12:46:51

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-02-19 12:46:51

解决方案1
3 已采纳 2017-02-19 12:46:51