2013-07-12 64 views
20

Tôi đang cố gắng tạo kiểu mã mẫu bằng CodeMirror, nhưng nó hoạt động một phần - nó áp dụng chủ đề đã chọn cho textarea nhưng cú pháp không được tô sáng.Chế độ HTML CodeMirror không hoạt động

Có trang web của tôi:

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

Dưới đây là một hình ảnh của kết quả. Có vẻ như để làm việc nhưng không có làm nổi bật cú pháp (ảnh trên cùng), tôi cũng đã cố gắng mà không CSS của tôi, nhưng kết quả là như nhau (ảnh dưới):

codemirror html mode

Vấn đề là với mode: "text/html" mà dường như không hoạt động đúng cách, nếu tôi sử dụng mode: "javascript", nó sẽ tô màu các thẻ theo quy tắc cú pháp JavaScript. Làm thế nào tôi có thể sửa lỗi này?

Trả lời

41

CodeMirror phân tích cú pháp HTML bằng chế độ XML. Để sử dụng nó, tập lệnh thích hợp phải được bao gồm, giống như với bất kỳ chế độ nào khác.

Thêm sự phụ thuộc của nó trong đánh dấu của bạn:

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

và thiết lập chế độ để xml:

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

Bên cạnh đó, bạn có thể muốn cấu hình phân tích cú pháp để cho phép phi XML cũng như hình thành . Bạn có thể làm như vậy bằng cách chuyển htmlMode cờ trên:

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

Xem XML/HTML mode demo cho một ví dụ sống.

+0

Vâng, tôi đã bỏ lỡ rất nhiều tệp, nhưng bạn đã cho tôi đúng cách: – vitto

+0

tôi đề nghị bạn [có một đọc trên trang web] (http://codemirror.net) và làm quen với CodeMirror tốt hơn một chút. –

+0

Tôi có vấn đề tương tự với OP, ngoại trừ việc tôi đang cố sử dụng chế độ Velocity. Tôi đã nhập tập lệnh xml nhưng tính năng tự động đóng không muốn hoạt động. Bạn có biết liệu Velocity có nên hoặc không tôn trọng cài đặt autoCloseTags theo thiết kế không? – user776686