我有两个文本字段，一个带有 HTML 代码，另一个带有 CSS 代码，但是 CodeMirror 的模式(HTML 模式)适用于整个页面，因此 CSS 代码根本没有突出显示。
链接到 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">
<html style="color: green">
<!-- this is a comment -->
<head>
<title>HTML Example</title>
</head>
<body>
The indentation tries to be <em>somewhat &quot;do what
I mean&quot;</em>... but might not match your style.
</body>
</html>
</textarea>
</body>
注意:这不是我的代码，只是一张现场图片，上面贴了代码。
最佳答案
我在 JSFiddle 上创建了以下工作示例.确保:
- 使用最新的 CodeMirror 版本。
- 包括以下来自 CodeMirror 的必需 javascript 模块:
- 对于 CSS，只需包含
mode/css/css.js。 - 对于 HTML，同时包含
mode/htmlmixed/htmlmixed.js(HTML + CSS + JS)和mode/xml/xml.js(需要解析 XML HTML)
- 对于 CSS，只需包含
关于javascript - 在同一页面(HTML 和 CSS)上使用 Codemirror 两次导致仅应用一种突出显示模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42325187/