CodeMirror HTML 模式不起作用

Question

我正在嘗試使用 CodeMirror 設置代碼示例的樣式，但它可以部分工作 - 它將所選主題應用於textarea ，但語法未突出顯示。

有我的頁面：

<textarea id="template-html" name="code" class="CodeMirror">
    <!DOCTYPE html>
    <foobar>
        <blah>Enter your xml here and press the button below to display it as highlighted by the CodeMirror XML mode</blah>
        <tag2 foo="2" bar="bar" />
    </foobar>
</textarea>
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/codemirror.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/ambiance.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/solarized.css">
<script type="text/javascript" src="/site.com/js/libs/codemirror/codemirror.js"></script>
<script type="text/javascript" src="/site.com/js/libs/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript">
    var config, editor;

    config = {
        lineNumbers: true,
        mode: "text/html",
        theme: "ambiance",
        indentWithTabs: false,
        readOnly: true
    };

    editor = CodeMirror.fromTextArea(document.getElementById("template-html"), config);

    function selectTheme() {
        editor.setOption("theme", "solarized dark");
    }
    setTimeout(selectTheme, 5000);
</script>

這是結果的圖像。 它似乎有效，但沒有語法突出顯示（圖像頂部），我也嘗試過不使用我的 CSS，但結果是相同的（圖像底部）：

codemirror html模式

問題在於mode: "text/html"似乎無法正常工作，如果我使用mode: "javascript"它會通過 JavaScript 語法規則為標簽着色。 我怎樣才能解決這個問題？

Answer 1

CodeMirror 使用 XML 模式解析 HTML。 要使用它，必須包含適當的腳本，與任何其他模式相同。

在你的標記中添加它的依賴：

<script type="text/javascript" 
        src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>

並將模式設置為xml ：

config = {
    mode : "xml",
    // ...
};

此外，您可能希望將解析器配置為允許格式不正確的 XML。 您可以通過打開htmlMode標志來做到這一點：

config = {
    mode : "xml",
    htmlMode: true,
    // ...
};

有關實時示例，請參閱XML/HTML 模式演示。

Answer 2

以防萬一我的經驗對某人有幫助。

我犯了以下錯誤：

<script src="lib/codemirror.js"></script>
<script type="text/javascript">
    const editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
        mode: "css",
        lineNumbers: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
        lint: true
    });
</script>
<script src="addons/lint/lint.js"></script>
<script src="addons/lint/css-lint.js"></script>
<script src="addons/fold/brace-fold.js"></script>
<script src="addons/fold/foldcode.js"></script>
<script src="addons/fold/foldgutter.js"></script>
<script src="addons/fold/indent-fold.js"></script>
<script src="addons/fold/markdown-fold.js"></script>
<script src="mode/css.js"></script>
<script src="//unpkg.com/csslint@1.0.5/dist/csslint.js"></script>

這是錯誤的：我首先調用了 codemirror.js - 主文件，然后初始化了編輯器，然后調用了它的資產。 在這種情況下，它不起作用，我花了一些時間才找到問題（我是在 WordPress 中做的，所以我只是讓我的腳本依賴於 codemirror.js）。

Answer 3

<script>
window.onload = function() {
var editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
        mode: "text/css",
        lineNumbers: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
        lint: true
    });
}
</script>

CodeMirror HTML 模式不起作用

問題描述

3 個解決方案

解決方案1
66 已采納 2013-07-13 18:20:24

解決方案2
0 2020-04-27 12:52:02

解決方案3
0 2022-05-19 06:51:33

CodeMirror HTML 模式不起作用

問題描述

3 個解決方案

解決方案1 66 已采納 2013-07-13 18:20:24

解決方案2 0 2020-04-27 12:52:02

解決方案3 0 2022-05-19 06:51:33

解決方案1
66 已采納 2013-07-13 18:20:24

解決方案2
0 2020-04-27 12:52:02

解決方案3
0 2022-05-19 06:51:33