2013-07-12 15 views
20

CodeMirror ile kod örneklerini denemeye çalışıyorum, ancak kısmen çalışıyor - seçilen temayı textarea'a uyguluyor ancak sözdizimi vurgulanmadı.CodeMirror HTML modu çalışmıyor

İşte
<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> 

sonucun bir görüntü:

sayfam yoktur. İşe ama dizim (görüntü üst) olmadan, ben de benim CSS olmadan denedim görünüyor, ancak sonuç (görüntü altta) aynıdır:

codemirror html mode

sorun görünüyor mode: "text/html" ile düzgün çalışmıyor, mode: "javascript" kullanırsam, etiketleri JavaScript sözdizimi kurallarına göre renklendirir. Bunu nasıl düzeltebilirim?

cevap

41

CodeMirror, XML modunu kullanarak HTML'yi ayrıştırır. Kullanmak için, diğer komut dizilerinde olduğu gibi uygun betik eklenmelidir.

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

ve xml için modunu ayarlamak:

İşaretlemenize olan bağımlılığını ekle

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

Ayrıca, sigara iyi biçimli XML için izin vermek için ayrıştırıcı yapılandırmak isteyebilirsiniz . Üzerinde htmlMode bayrak değiştirerek yapabilirsiniz:

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

canlı örneğin XML/HTML mode demo bakınız.

+0

Evet, birçok dosya eksikti, ancak bana doğru yolu verdiniz: – vitto

+0

[web sitesinde bir okuma var] (http://codemirror.net) öneririm ve CodeMirror'u tanıyın biraz daha iyi. –

+0

Hız modunu kullanmaya çalıştığım dışında, OP ile benzer bir sorunum var. Xml komut dosyasını aldım, ancak otomatik kapanma yine de çalışmak istemiyor. Velocity'nin autoCloseTags ayarını tasarım ile onurlandırması gerekip gerekmediğini biliyor musunuz? – user776686