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

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

Link to Codemirrors CSS mode: Codemirror CSS Mode 链接到Codemirror CSS模式： Codemirror CSS模式

I couldn't seem to find a solution in the Codemirror manual, this is all I found: 我似乎在Codemirror手册中找不到解决方案，这就是我发现的全部内容：

mode: string|object The mode to use. 模式：string | object要使用的模式。 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. 它可以是一个字符串，可以简单地命名模式，也可以是与该模式关联的MIME类型。 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}). 或者，它可以是一个包含该模式的配置选项的对象，该对象的名称属性为该模式命名（例如{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. 您可以通过检查CodeMirror.modes和CodeMirror.mimeModes对象来询问CodeMirror已定义了哪些模式和MIME类型。 The first maps mode names to their constructors, and the second maps MIME types to mode specs 第一个将模式名称映射到其构造函数，第二个将MIME类型映射到模式规范

Link to the above info in Codemirrors manual 链接到Codemirrors手册中的上述信息

My textfield code and id's: 我的文本字段代码和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>

Note: This is not my code, just a picture of how the website looks live, code is posted above. 注意：这不是我的代码，只是上面显示的网站外观的图片。

Answer 1

I've created the following working example on a JSFiddle . 我在JSFiddle上创建了以下工作示例。 Make sure to: 确保：

Use the latest CodeMirror version. 使用最新的CodeMirror版本。
Include the following required javascript modules from CodeMirror: 包括来自CodeMirror的以下必需的javascript模块：
- For CSS, just include mode/css/css.js . 对于CSS，只需包含mode/css/css.js 。
- For HTML, include both mode/htmlmixed/htmlmixed.js (HTML + CSS + JS) and mode/xml/xml.js (XML is required to parse HTML) 对于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