Question

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

链接到Codemirrors CSS模式：Codemirror CSS Mode

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

mode：string | object要使用的模式。如果没有给出，这将是默认值到加载的第一个模式。它可能是一个字符串，也是只是命名模式或是与模式关联的MIME类型。或者，它可以是包含配置选项的对象对于模式，使用名称属性命名模式（例如 {name：“javascript”，json：true}）。每种模式的演示页面包含有关模式的配置参数的信息支持。您可以询问CodeMirror模式和MIME类型通过检查CodeMirror.modes和CodeMirror.mimeModes来定义对象。第一个将模式名称映射到它们的构造函数，以及第二个将MIME类型映射到模式规范

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（解析HTML需要XML）

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

1 个答案: