3

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

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

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

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

注意：这不是我的代码，只是网站看起来如何生活的图片，代码贴在上面。

在此处输入图像描述

4

1 回答 1

4

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

  • 使用最新的 CodeMirror 版本。
  • 包括来自 CodeMirror 的以下必需的 javascript 模块：
    • 对于 CSS，只需包含mode/css/css.js.
    • 对于 HTML，包括mode/htmlmixed/htmlmixed.js(HTML + CSS + JS) 和mode/xml/xml.js(解析 HTML 需要 XML)
于 2017-02-19T12:46:51.797 回答