.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
CodeMirror
Home Manual Code
Language modes HTML mixed
HTML mixed mode
Mixed HTML Example
h1 {font-family: comic sans; color: #f0f;} div {background: yellow !important;} body { max-width: 50em; margin: 1em 2em 1em 5em; }
Mixed HTML Example
function jsFunc(arg1, arg2) { if (arg1 && arg2) document.body.innerHTML = "achoo"; }
// Define an extended mixed-mode that understands vbscript and // leaves mustache/handlebars embedded templates in html mode var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor = CodeMirror.fromTextArea(document.getElementById("code"), { mode: mixedMode, selectionPointer: true });
The HTML mixed mode depends on the XML, JavaScript, and CSS modes.
It takes an optional mode configuration option, tags , which can be used to add custom behavior for specific tags. When given, it should be an object mapping tag names (for example script ) to arrays or three-element arrays. Those inner arrays indicate [attributeName, valueRegexp, modeSpec ] specifications. For example, you could use ["type", /^foo$/, "foo"] to map the attribute type="foo" to the foo mode. When the first two fields are null ( [null, null, "mode"] ), the given mode is used for any such tag that doesn't match any of the previously given attributes. For example:
var myModeSpec = { name: "htmlmixed", tags: { style: [["type", /^text\/(x-)?scss$/, "text/x-scss"], [null, null, "css"]], custom: [[null, null, "customMode"]] } }
MIME types defined: text/html (redefined, only takes effect if you load this parser after the XML parser).