javascript - fromtextarea - codemirror modes
El modo HTML de CodeMirror no funciona (1)
CodeMirror analiza HTML utilizando el modo XML. Para usarlo, se debe incluir el script apropiado, igual que con cualquier otro modo.
Agregue su dependencia en su marca:
<script type="text/javascript"
src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>
y establece el modo a xml :
config = {
mode : "xml",
// ...
};
Además, es posible que desee configurar el analizador para permitir XML sin formato. Puede hacerlo activando el indicador htmlMode en:
config = {
mode : "xml",
htmlMode: true,
// ...
};
Vea la demostración en modo XML / HTML para ver un ejemplo en vivo.
Estoy intentando diseñar ejemplos de código con CodeMirror, pero funciona parcialmente: aplica el tema seleccionado al área de textarea pero la sintaxis no está resaltada.
Ahí está mi página:
<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>
Aquí hay una imagen del resultado. Parece funcionar pero sin el resaltado de sintaxis (imagen superior), también lo he intentado sin mi CSS, pero el resultado es el mismo (parte inferior de la imagen):
El problema es con el mode: "text/html" que parece no estar funcionando correctamente, si uso el mode: "javascript" colorea las etiquetas según las reglas de sintaxis de JavaScript. ¿Cómo puedo arreglar esto?