2013-07-12 14 views
20

Ich bin mit Codemirror zu Artcode Proben versucht, aber es funktioniert teilweise - es gilt das ausgewählte Thema auf die textarea aber die Syntax hervorgehoben ist.Codemirror HTML-Modus funktioniert nicht

Es ist meine Seite:

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

Hier ist ein Bild des Ergebnisses. Es scheint zu funktionieren, aber ohne die Syntax-Hervorhebung (Bild oben), habe ich auch ohne meine CSS versucht, aber das Ergebnis ist das gleiche (Bild unten):

codemirror html mode

Das Problem mit mode: "text/html" ist das scheint um nicht richtig zu funktionieren, wenn ich mode: "javascript" verwende, werden die Tags durch die JavaScript-Syntaxregeln eingefärbt. Wie kann ich das beheben?

Antwort

41

Codemirror parst HTML den XML-Modus. Um es zu verwenden, muss das entsprechende Skript wie in jedem anderen Modus enthalten sein.

seine Abhängigkeit in Ihrem Markup hinzufügen:

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

und den Modus auf xml:

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

Darüber hinaus möchten Sie können den Parser konfigurieren, nicht wohlgeformte XML zu ermöglichen . Sie können durch Umschalten der htmlMode Flagge so tun auf:

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

Siehe XML/HTML mode demo für ein anschauliches Beispiel.

+0

Ja, mir fehlten viele Dateien, aber Sie haben mir den richtigen Weg gegeben: – vitto

+0

Ich schlage vor, Sie [lesen Sie auf der Website] (http://codemirror.net) und lernen CodeMirror a bisschen besser. –

+0

Ich habe ein ähnliches Problem mit dem OP, außer dass ich versuche, den Velocity-Modus zu verwenden. Ich habe das XML-Skript importiert, aber das automatische Schließen will trotzdem nicht funktionieren. Weißt du zufällig, ob die Velocity die autoCloseTags-Einstellung per Entwurf berücksichtigen sollte oder nicht? – user776686

Verwandte Themen