CodeMirror HTML模式不起作用

我試圖使用CodeMirror對代碼示例進行樣式設置，但它部分工作 - 它將選定主題應用於textarea，但語法未突出顯示。CodeMirror HTML模式不起作用

有我的網頁：

<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語法規則着色標記。我怎樣才能解決這個問題？

來源

2013-07-12 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 mode demo。

來源

2013-07-13 18:20:24

是的，我錯過了很多文件，但你給了我正確的方式： – vitto

我建議你[在網站上閱讀]（http://codemirror.net）並瞭解CodeMirror a好一點。 –

我有一個類似的問題，除了我試圖使用速度模式。我已經導入了xml腳本，但是自動關閉並不想繼續工作。你碰巧知道Velocity是否應該遵循設計的autoCloseTags設置？ – user776686

CodeMirror HTML模式不起作用

回答

相關問題