web-dev-qa-db-ja.com

CodeMirror HTMLモードが機能しない

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

問題はmode: "text/html"これを使用すると、正しく機能していないようですmode: "javascript" JavaScriptシンタックスルールによってタグを色付けします。どうすれば修正できますか？

javascriptsyntax-highlightingcodemirror
26
vitto

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モードのデモ をご覧ください。

52
Eliran Malka