Quick demo on how to use Jade and CodeMirror to create a simple Jade editor with live preview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jade Editor</title>
<link rel="stylesheet" href="codemirror.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="codemirror.js"></script>
<script src="javascript.js"></script>
<script src="css.js"></script>
<script src="xml.js"></script>
<script src="htmlmixed.js"></script>
<script src="jade.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jade/1.11.0/jade.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<style>
html, body {
margin: 0;
height: 100%;
}
.CodeMirror {
border: solid 1px #aaa;
height: auto;
min-height: 300px;
}
.header {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
padding: 10px 0;
border-bottom: solid 1px #0FA0CE;
margin-bottom: 10px;
}
.rendered-html {
background-color: #f5f5f5;
border: solid 1px #aaa;
min-height: 278px;
height: auto;
padding: 10px;
}
.rendered-html {
font-size: 14px;
font-family: 'Helvetica neue', Helvetica;
}
.rendered-html h1 {
font-size: 2.1rem;
font-weight: bold;
margin-bottom: 4px;
}
.rendered-html h2 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 4px;
}
.rendered-html h3 {
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 4px;
}
.rendered-html h4 {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 4px;
}
.lang-ref {
text-align: right;
text-transform: none;
}
.lang-ref a {
color: #aaa;
text-decoration: none;
margin-left: 10px;
}
.app-name {
color: #0FA0CE;
}
</style>
</head>
<body>
<div class="container header">
<div class="row">
<div class="eight columns">
<span class="app-name">jade live preview</span>
</div>
<div class="four columns lang-ref">
<a href="//jade-lang.com/reference/" target="_blank">Jade Reference</a>
<a href="https://gist.github.com/pnavarrc/cdd92c979cdd5b548285" target="_blank">GitHub</a>
<a href="https://gist.github.com/pnavarrc/cdd92c979cdd5b548285#file-readme-md" target="_blank">About</a>
</div>
</div>
</div>
<div class="container jade-editor">
<div class="row">
<div class="six columns">
<textarea id="jade-source">
h1 Jade Live Preview
p A minimal editor with a live preview for
a(href="//jade-lang.com/") Jade.
</textarea>
</div>
<div class="six columns">
<div id="rendered" class="rendered-html"></div>
</div>
</div>
</div>
<script>
var editorOptions = {
mode: {name: 'jade', alignCDATA: true},
lineNumbers: true,
tabSize: 2,
lineWrapping: true,
indentWithTabs: false
};
function updateRendered() {
var jadeSource = editor.getValue(),
jadeCompiled = jade.compile(jadeSource);
$('#rendered').html(jadeCompiled());
}
var editor = CodeMirror.fromTextArea($('#jade-source').get(0), editorOptions);
updateRendered();
editor.on('changes', updateRendered);
</script>
</body>
</html>
/* BASICS */
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
color: black;
}
/* PADDING */
.CodeMirror-lines {
padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
padding: 0 4px; /* Horizontal padding of content */
}
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
background-color: white; /* The little square between H and V scrollbars */
}
/* GUTTER */
.CodeMirror-gutters {
border-right: 1px solid #ddd;
background-color: #f7f7f7;
white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
padding: 0 3px 0 5px;
min-width: 20px;
text-align: right;
color: #999;
white-space: nowrap;
}
.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }
/* CURSOR */
.CodeMirror-cursor {
border-left: 1px solid black;
border-right: none;
width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
width: auto;
border: 0;
background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
z-index: 1;
}
.cm-animate-fat-cursor {
width: auto;
border: 0;
-webkit-animation: blink 1.06s steps(1) infinite;
-moz-animation: blink 1.06s steps(1) infinite;
animation: blink 1.06s steps(1) infinite;
background-color: #7e7;
}
@-moz-keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
@-webkit-keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
@keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}
.cm-tab { display: inline-block; text-decoration: inherit; }
.CodeMirror-ruler {
border-left: 1px solid #ccc;
position: absolute;
}
/* DEFAULT THEME */
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}
.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}
.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}
.CodeMirror-composing { border-bottom: 2px solid; }
/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}
/* STOP */
/* The rest of this file contains styles related to the mechanics of
the editor. You probably shouldn't touch them. */
.CodeMirror {
position: relative;
overflow: hidden;
background: white;
}
.CodeMirror-scroll {
overflow: scroll !important; /* Things will break if this is overridden */
/* 30px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -30px; margin-right: -30px;
padding-bottom: 30px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
}
.CodeMirror-sizer {
position: relative;
border-right: 30px solid transparent;
}
/* The fake, visible scrollbars. Used to force redraw during scrolling
before actuall scrolling happens, thus preventing shaking and
flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
position: absolute;
z-index: 6;
display: none;
}
.CodeMirror-vscrollbar {
right: 0; top: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.CodeMirror-hscrollbar {
bottom: 0; left: 0;
overflow-y: hidden;
overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
left: 0; bottom: 0;
}
.CodeMirror-gutters {
position: absolute; left: 0; top: 0;
z-index: 3;
}
.CodeMirror-gutter {
white-space: normal;
height: 100%;
display: inline-block;
margin-bottom: -30px;
/* Hack to make IE7 behave */
*zoom:1;
*display:inline;
}
.CodeMirror-gutter-wrapper {
position: absolute;
z-index: 4;
background: none !important;
border: none !important;
}
.CodeMirror-gutter-background {
position: absolute;
top: 0; bottom: 0;
z-index: 4;
}
.CodeMirror-gutter-elt {
position: absolute;
cursor: default;
z-index: 4;
}
.CodeMirror-gutter-wrapper {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.CodeMirror-lines {
cursor: text;
min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre {
/* Reset some styles that the rest of the page might have set */
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
border-width: 0;
background: transparent;
font-family: inherit;
font-size: inherit;
margin: 0;
white-space: pre;
word-wrap: normal;
line-height: inherit;
color: inherit;
z-index: 2;
position: relative;
overflow: visible;
-webkit-tap-highlight-color: transparent;
}
.CodeMirror-wrap pre {
word-wrap: break-word;
white-space: pre-wrap;
word-break: normal;
}
.CodeMirror-linebackground {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 0;
}
.CodeMirror-linewidget {
position: relative;
z-index: 2;
overflow: auto;
}
.CodeMirror-widget {}
.CodeMirror-code {
outline: none;
}
/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.CodeMirror-measure {
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden;
}
.CodeMirror-cursor { position: absolute; }
.CodeMirror-measure pre { position: static; }
div.CodeMirror-cursors {
visibility: hidden;
position: relative;
z-index: 3;
}
div.CodeMirror-dragcursors {
visibility: visible;
}
.CodeMirror-focused div.CodeMirror-cursors {
visibility: visible;
}
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
.cm-searching {
background: #ffa;
background: rgba(255, 255, 0, .4);
}
/* IE7 hack to prevent it from returning funny offsetTops on the spans */
.CodeMirror span { *vertical-align: text-bottom; }
/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }
@media print {
/* Hide the cursor when printing */
.CodeMirror div.CodeMirror-cursors {
visibility: hidden;
}
}
/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }
/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: http://codemirror.net/LICENSE
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"), require("../xml/xml"), require("../javascript/javascript"), require("../css/css"));
else if (typeof define == "function" && define.amd) // AMD
define(["../../lib/codemirror", "../xml/xml", "../javascript/javascript", "../css/css"], mod);
else // Plain browser env
mod(CodeMirror);
})(function(CodeMirror) {
"use strict";
var defaultTags = {
script: [
["lang", /(javascript|babel)/i, "javascript"],
["type", /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^$/i, "javascript"],
["type", /./, "text/plain"],
[null, null, "javascript"]
],
style: [
["lang", /^css$/i, "css"],
["type", /^(text\/)?(x-)?(stylesheet|css)$/i, "css"],
["type", /./, "text/plain"],
[null, null, "css"]
]
};
function maybeBackup(stream, pat, style) {
var cur = stream.current(), close = cur.search(pat);
if (close > -1) {
stream.backUp(cur.length - close);
} else if (cur.match(/<\/?$/)) {
stream.backUp(cur.length);
if (!stream.match(pat, false)) stream.match(cur);
}
return style;
}
var attrRegexpCache = {};
function getAttrRegexp(attr) {
var regexp = attrRegexpCache[attr];
if (regexp) return regexp;
return attrRegexpCache[attr] = new RegExp("\\s+" + attr + "\\s*=\\s*('|\")?([^'\"]+)('|\")?\\s*");
}
function getAttrValue(stream, attr) {
var pos = stream.pos, match;
while (pos >= 0 && stream.string.charAt(pos) !== "<") pos--;
if (pos < 0) return pos;
if (match = stream.string.slice(pos, stream.pos).match(getAttrRegexp(attr)))
return match[2];
return "";
}
function getTagRegexp(tagName, anchored) {
return new RegExp((anchored ? "^" : "") + "<\/\s*" + tagName + "\s*>", "i");
}
function addTags(from, to) {
for (var tag in from) {
var dest = to[tag] || (to[tag] = []);
var source = from[tag];
for (var i = source.length - 1; i >= 0; i--)
dest.unshift(source[i])
}
}
function findMatchingMode(tagInfo, stream) {
for (var i = 0; i < tagInfo.length; i++) {
var spec = tagInfo[i];
if (!spec[0] || spec[1].test(getAttrValue(stream, spec[0]))) return spec[2];
}
}
CodeMirror.defineMode("htmlmixed", function (config, parserConfig) {
var htmlMode = CodeMirror.getMode(config, {
name: "xml",
htmlMode: true,
multilineTagIndentFactor: parserConfig.multilineTagIndentFactor,
multilineTagIndentPastTag: parserConfig.multilineTagIndentPastTag
});
var tags = {};
var configTags = parserConfig && parserConfig.tags, configScript = parserConfig && parserConfig.scriptTypes;
addTags(defaultTags, tags);
if (configTags) addTags(configTags, tags);
if (configScript) for (var i = configScript.length - 1; i >= 0; i--)
tags.script.unshift(["type", configScript[i].matches, configScript[i].mode])
function html(stream, state) {
var tagName = state.htmlState.tagName;
var tagInfo = tagName && tags[tagName.toLowerCase()];
var style = htmlMode.token(stream, state.htmlState), modeSpec;
if (tagInfo && /\btag\b/.test(style) && stream.current() === ">" &&
(modeSpec = findMatchingMode(tagInfo, stream))) {
var mode = CodeMirror.getMode(config, modeSpec);
var endTagA = getTagRegexp(tagName, true), endTag = getTagRegexp(tagName, false);
state.token = function (stream, state) {
if (stream.match(endTagA, false)) {
state.token = html;
state.localState = state.localMode = null;
return null;
}
return maybeBackup(stream, endTag, state.localMode.token(stream, state.localState));
};
state.localMode = mode;
state.localState = CodeMirror.startState(mode, htmlMode.indent(state.htmlState, ""));
}
return style;
};
return {
startState: function () {
var state = htmlMode.startState();
return {token: html, localMode: null, localState: null, htmlState: state};
},
copyState: function (state) {
var local;
if (state.localState) {
local = CodeMirror.copyState(state.localMode, state.localState);
}
return {token: state.token, localMode: state.localMode, localState: local,
htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
},
token: function (stream, state) {
return state.token(stream, state);
},
indent: function (state, textAfter) {
if (!state.localMode || /^\s*<\//.test(textAfter))
return htmlMode.indent(state.htmlState, textAfter);
else if (state.localMode.indent)
return state.localMode.indent(state.localState, textAfter);
else
return CodeMirror.Pass;
},
innerMode: function (state) {
return {state: state.localState || state.htmlState, mode: state.localMode || htmlMode};
}
};
}, "xml", "javascript", "css");
CodeMirror.defineMIME("text/html", "htmlmixed");
});
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: http://codemirror.net/LICENSE
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"), require("../javascript/javascript"), require("../css/css"), require("../htmlmixed/htmlmixed"));
else if (typeof define == "function" && define.amd) // AMD
define(["../../lib/codemirror", "../javascript/javascript", "../css/css", "../htmlmixed/htmlmixed"], mod);
else // Plain browser env
mod(CodeMirror);
})(function(CodeMirror) {
"use strict";
CodeMirror.defineMode('jade', function (config) {
// token types
var KEYWORD = 'keyword';
var DOCTYPE = 'meta';
var ID = 'builtin';
var CLASS = 'qualifier';
var ATTRS_NEST = {
'{': '}',
'(': ')',
'[': ']'
};
var jsMode = CodeMirror.getMode(config, 'javascript');
function State() {
this.javaScriptLine = false;
this.javaScriptLineExcludesColon = false;
this.javaScriptArguments = false;
this.javaScriptArgumentsDepth = 0;
this.isInterpolating = false;
this.interpolationNesting = 0;
this.jsState = jsMode.startState();
this.restOfLine = '';
this.isIncludeFiltered = false;
this.isEach = false;
this.lastTag = '';
this.scriptType = '';
// Attributes Mode
this.isAttrs = false;
this.attrsNest = [];
this.inAttributeName = true;
this.attributeIsType = false;
this.attrValue = '';
// Indented Mode
this.indentOf = Infinity;
this.indentToken = '';
this.innerMode = null;
this.innerState = null;
this.innerModeForLine = false;
}
/**
* Safely copy a state
*
* @return {State}
*/
State.prototype.copy = function () {
var res = new State();
res.javaScriptLine = this.javaScriptLine;
res.javaScriptLineExcludesColon = this.javaScriptLineExcludesColon;
res.javaScriptArguments = this.javaScriptArguments;
res.javaScriptArgumentsDepth = this.javaScriptArgumentsDepth;
res.isInterpolating = this.isInterpolating;
res.interpolationNesting = this.intpolationNesting;
res.jsState = CodeMirror.copyState(jsMode, this.jsState);
res.innerMode = this.innerMode;
if (this.innerMode && this.innerState) {
res.innerState = CodeMirror.copyState(this.innerMode, this.innerState);
}
res.restOfLine = this.restOfLine;
res.isIncludeFiltered = this.isIncludeFiltered;
res.isEach = this.isEach;
res.lastTag = this.lastTag;
res.scriptType = this.scriptType;
res.isAttrs = this.isAttrs;
res.attrsNest = this.attrsNest.slice();
res.inAttributeName = this.inAttributeName;
res.attributeIsType = this.attributeIsType;
res.attrValue = this.attrValue;
res.indentOf = this.indentOf;
res.indentToken = this.indentToken;
res.innerModeForLine = this.innerModeForLine;
return res;
};
function javaScript(stream, state) {
if (stream.sol()) {
// if javaScriptLine was set at end of line, ignore it
state.javaScriptLine = false;
state.javaScriptLineExcludesColon = false;
}
if (state.javaScriptLine) {
if (state.javaScriptLineExcludesColon && stream.peek() === ':') {
state.javaScriptLine = false;
state.javaScriptLineExcludesColon = false;
return;
}
var tok = jsMode.token(stream, state.jsState);
if (stream.eol()) state.javaScriptLine = false;
return tok || true;
}
}
function javaScriptArguments(stream, state) {
if (state.javaScriptArguments) {
if (state.javaScriptArgumentsDepth === 0 && stream.peek() !== '(') {
state.javaScriptArguments = false;
return;
}
if (stream.peek() === '(') {
state.javaScriptArgumentsDepth++;
} else if (stream.peek() === ')') {
state.javaScriptArgumentsDepth--;
}
if (state.javaScriptArgumentsDepth === 0) {
state.javaScriptArguments = false;
return;
}
var tok = jsMode.token(stream, state.jsState);
return tok || true;
}
}
function yieldStatement(stream) {
if (stream.match(/^yield\b/)) {
return 'keyword';
}
}
function doctype(stream) {
if (stream.match(/^(?:doctype) *([^\n]+)?/)) {
return DOCTYPE;
}
}
function interpolation(stream, state) {
if (stream.match('#{')) {
state.isInterpolating = true;
state.interpolationNesting = 0;
return 'punctuation';
}
}
function interpolationContinued(stream, state) {
if (state.isInterpolating) {
if (stream.peek() === '}') {
state.interpolationNesting--;
if (state.interpolationNesting < 0) {
stream.next();
state.isInterpolating = false;
return 'puncutation';
}
} else if (stream.peek() === '{') {
state.interpolationNesting++;
}
return jsMode.token(stream, state.jsState) || true;
}
}
function caseStatement(stream, state) {
if (stream.match(/^case\b/)) {
state.javaScriptLine = true;
return KEYWORD;
}
}
function when(stream, state) {
if (stream.match(/^when\b/)) {
state.javaScriptLine = true;
state.javaScriptLineExcludesColon = true;
return KEYWORD;
}
}
function defaultStatement(stream) {
if (stream.match(/^default\b/)) {
return KEYWORD;
}
}
function extendsStatement(stream, state) {
if (stream.match(/^extends?\b/)) {
state.restOfLine = 'string';
return KEYWORD;
}
}
function append(stream, state) {
if (stream.match(/^append\b/)) {
state.restOfLine = 'variable';
return KEYWORD;
}
}
function prepend(stream, state) {
if (stream.match(/^prepend\b/)) {
state.restOfLine = 'variable';
return KEYWORD;
}
}
function block(stream, state) {
if (stream.match(/^block\b *(?:(prepend|append)\b)?/)) {
state.restOfLine = 'variable';
return KEYWORD;
}
}
function include(stream, state) {
if (stream.match(/^include\b/)) {
state.restOfLine = 'string';
return KEYWORD;
}
}
function includeFiltered(stream, state) {
if (stream.match(/^include:([a-zA-Z0-9\-]+)/, false) && stream.match('include')) {
state.isIncludeFiltered = true;
return KEYWORD;
}
}
function includeFilteredContinued(stream, state) {
if (state.isIncludeFiltered) {
var tok = filter(stream, state);
state.isIncludeFiltered = false;
state.restOfLine = 'string';
return tok;
}
}
function mixin(stream, state) {
if (stream.match(/^mixin\b/)) {
state.javaScriptLine = true;
return KEYWORD;
}
}
function call(stream, state) {
if (stream.match(/^\+([-\w]+)/)) {
if (!stream.match(/^\( *[-\w]+ *=/, false)) {
state.javaScriptArguments = true;
state.javaScriptArgumentsDepth = 0;
}
return 'variable';
}
if (stream.match(/^\+#{/, false)) {
stream.next();
state.mixinCallAfter = true;
return interpolation(stream, state);
}
}
function callArguments(stream, state) {
if (state.mixinCallAfter) {
state.mixinCallAfter = false;
if (!stream.match(/^\( *[-\w]+ *=/, false)) {
state.javaScriptArguments = true;
state.javaScriptArgumentsDepth = 0;
}
return true;
}
}
function conditional(stream, state) {
if (stream.match(/^(if|unless|else if|else)\b/)) {
state.javaScriptLine = true;
return KEYWORD;
}
}
function each(stream, state) {
if (stream.match(/^(- *)?(each|for)\b/)) {
state.isEach = true;
return KEYWORD;
}
}
function eachContinued(stream, state) {
if (state.isEach) {
if (stream.match(/^ in\b/)) {
state.javaScriptLine = true;
state.isEach = false;
return KEYWORD;
} else if (stream.sol() || stream.eol()) {
state.isEach = false;
} else if (stream.next()) {
while (!stream.match(/^ in\b/, false) && stream.next());
return 'variable';
}
}
}
function whileStatement(stream, state) {
if (stream.match(/^while\b/)) {
state.javaScriptLine = true;
return KEYWORD;
}
}
function tag(stream, state) {
var captures;
if (captures = stream.match(/^(\w(?:[-:\w]*\w)?)\/?/)) {
state.lastTag = captures[1].toLowerCase();
if (state.lastTag === 'script') {
state.scriptType = 'application/javascript';
}
return 'tag';
}
}
function filter(stream, state) {
if (stream.match(/^:([\w\-]+)/)) {
var innerMode;
if (config && config.innerModes) {
innerMode = config.innerModes(stream.current().substring(1));
}
if (!innerMode) {
innerMode = stream.current().substring(1);
}
if (typeof innerMode === 'string') {
innerMode = CodeMirror.getMode(config, innerMode);
}
setInnerMode(stream, state, innerMode);
return 'atom';
}
}
function code(stream, state) {
if (stream.match(/^(!?=|-)/)) {
state.javaScriptLine = true;
return 'punctuation';
}
}
function id(stream) {
if (stream.match(/^#([\w-]+)/)) {
return ID;
}
}
function className(stream) {
if (stream.match(/^\.([\w-]+)/)) {
return CLASS;
}
}
function attrs(stream, state) {
if (stream.peek() == '(') {
stream.next();
state.isAttrs = true;
state.attrsNest = [];
state.inAttributeName = true;
state.attrValue = '';
state.attributeIsType = false;
return 'punctuation';
}
}
function attrsContinued(stream, state) {
if (state.isAttrs) {
if (ATTRS_NEST[stream.peek()]) {
state.attrsNest.push(ATTRS_NEST[stream.peek()]);
}
if (state.attrsNest[state.attrsNest.length - 1] === stream.peek()) {
state.attrsNest.pop();
} else if (stream.eat(')')) {
state.isAttrs = false;
return 'punctuation';
}
if (state.inAttributeName && stream.match(/^[^=,\)!]+/)) {
if (stream.peek() === '=' || stream.peek() === '!') {
state.inAttributeName = false;
state.jsState = jsMode.startState();
if (state.lastTag === 'script' && stream.current().trim().toLowerCase() === 'type') {
state.attributeIsType = true;
} else {
state.attributeIsType = false;
}
}
return 'attribute';
}
var tok = jsMode.token(stream, state.jsState);
if (state.attributeIsType && tok === 'string') {
state.scriptType = stream.current().toString();
}
if (state.attrsNest.length === 0 && (tok === 'string' || tok === 'variable' || tok === 'keyword')) {
try {
Function('', 'var x ' + state.attrValue.replace(/,\s*$/, '').replace(/^!/, ''));
state.inAttributeName = true;
state.attrValue = '';
stream.backUp(stream.current().length);
return attrsContinued(stream, state);
} catch (ex) {
//not the end of an attribute
}
}
state.attrValue += stream.current();
return tok || true;
}
}
function attributesBlock(stream, state) {
if (stream.match(/^&attributes\b/)) {
state.javaScriptArguments = true;
state.javaScriptArgumentsDepth = 0;
return 'keyword';
}
}
function indent(stream) {
if (stream.sol() && stream.eatSpace()) {
return 'indent';
}
}
function comment(stream, state) {
if (stream.match(/^ *\/\/(-)?([^\n]*)/)) {
state.indentOf = stream.indentation();
state.indentToken = 'comment';
return 'comment';
}
}
function colon(stream) {
if (stream.match(/^: */)) {
return 'colon';
}
}
function text(stream, state) {
if (stream.match(/^(?:\| ?| )([^\n]+)/)) {
return 'string';
}
if (stream.match(/^(<[^\n]*)/, false)) {
// html string
setInnerMode(stream, state, 'htmlmixed');
state.innerModeForLine = true;
return innerMode(stream, state, true);
}
}
function dot(stream, state) {
if (stream.eat('.')) {
var innerMode = null;
if (state.lastTag === 'script' && state.scriptType.toLowerCase().indexOf('javascript') != -1) {
innerMode = state.scriptType.toLowerCase().replace(/"|'/g, '');
} else if (state.lastTag === 'style') {
innerMode = 'css';
}
setInnerMode(stream, state, innerMode);
return 'dot';
}
}
function fail(stream) {
stream.next();
return null;
}
function setInnerMode(stream, state, mode) {
mode = CodeMirror.mimeModes[mode] || mode;
mode = config.innerModes ? config.innerModes(mode) || mode : mode;
mode = CodeMirror.mimeModes[mode] || mode;
mode = CodeMirror.getMode(config, mode);
state.indentOf = stream.indentation();
if (mode && mode.name !== 'null') {
state.innerMode = mode;
} else {
state.indentToken = 'string';
}
}
function innerMode(stream, state, force) {
if (stream.indentation() > state.indentOf || (state.innerModeForLine && !stream.sol()) || force) {
if (state.innerMode) {
if (!state.innerState) {
state.innerState = state.innerMode.startState ? state.innerMode.startState(stream.indentation()) : {};
}
return stream.hideFirstChars(state.indentOf + 2, function () {
return state.innerMode.token(stream, state.innerState) || true;
});
} else {
stream.skipToEnd();
return state.indentToken;
}
} else if (stream.sol()) {
state.indentOf = Infinity;
state.indentToken = null;
state.innerMode = null;
state.innerState = null;
}
}
function restOfLine(stream, state) {
if (stream.sol()) {
// if restOfLine was set at end of line, ignore it
state.restOfLine = '';
}
if (state.restOfLine) {
stream.skipToEnd();
var tok = state.restOfLine;
state.restOfLine = '';
return tok;
}
}
function startState() {
return new State();
}
function copyState(state) {
return state.copy();
}
/**
* Get the next token in the stream
*
* @param {Stream} stream
* @param {State} state
*/
function nextToken(stream, state) {
var tok = innerMode(stream, state)
|| restOfLine(stream, state)
|| interpolationContinued(stream, state)
|| includeFilteredContinued(stream, state)
|| eachContinued(stream, state)
|| attrsContinued(stream, state)
|| javaScript(stream, state)
|| javaScriptArguments(stream, state)
|| callArguments(stream, state)
|| yieldStatement(stream, state)
|| doctype(stream, state)
|| interpolation(stream, state)
|| caseStatement(stream, state)
|| when(stream, state)
|| defaultStatement(stream, state)
|| extendsStatement(stream, state)
|| append(stream, state)
|| prepend(stream, state)
|| block(stream, state)
|| include(stream, state)
|| includeFiltered(stream, state)
|| mixin(stream, state)
|| call(stream, state)
|| conditional(stream, state)
|| each(stream, state)
|| whileStatement(stream, state)
|| tag(stream, state)
|| filter(stream, state)
|| code(stream, state)
|| id(stream, state)
|| className(stream, state)
|| attrs(stream, state)
|| attributesBlock(stream, state)
|| indent(stream, state)
|| text(stream, state)
|| comment(stream, state)
|| colon(stream, state)
|| dot(stream, state)
|| fail(stream, state);
return tok === true ? null : tok;
}
return {
startState: startState,
copyState: copyState,
token: nextToken
};
});
CodeMirror.defineMIME('text/x-jade', 'jade');
});
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: http://codemirror.net/LICENSE
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"));
else if (typeof define == "function" && define.amd) // AMD
define(["../../lib/codemirror"], mod);
else // Plain browser env
mod(CodeMirror);
})(function(CodeMirror) {
"use strict";
CodeMirror.defineMode("xml", function(config, parserConfig) {
var indentUnit = config.indentUnit;
var multilineTagIndentFactor = parserConfig.multilineTagIndentFactor || 1;
var multilineTagIndentPastTag = parserConfig.multilineTagIndentPastTag;
if (multilineTagIndentPastTag == null) multilineTagIndentPastTag = true;
var Kludges = parserConfig.htmlMode ? {
autoSelfClosers: {'area': true, 'base': true, 'br': true, 'col': true, 'command': true,
'embed': true, 'frame': true, 'hr': true, 'img': true, 'input': true,
'keygen': true, 'link': true, 'meta': true, 'param': true, 'source': true,
'track': true, 'wbr': true, 'menuitem': true},
implicitlyClosed: {'dd': true, 'li': true, 'optgroup': true, 'option': true, 'p': true,
'rp': true, 'rt': true, 'tbody': true, 'td': true, 'tfoot': true,
'th': true, 'tr': true},
contextGrabbers: {
'dd': {'dd': true, 'dt': true},
'dt': {'dd': true, 'dt': true},
'li': {'li': true},
'option': {'option': true, 'optgroup': true},
'optgroup': {'optgroup': true},
'p': {'address': true, 'article': true, 'aside': true, 'blockquote': true, 'dir': true,
'div': true, 'dl': true, 'fieldset': true, 'footer': true, 'form': true,
'h1': true, 'h2': true, 'h3': true, 'h4': true, 'h5': true, 'h6': true,
'header': true, 'hgroup': true, 'hr': true, 'menu': true, 'nav': true, 'ol': true,
'p': true, 'pre': true, 'section': true, 'table': true, 'ul': true},
'rp': {'rp': true, 'rt': true},
'rt': {'rp': true, 'rt': true},
'tbody': {'tbody': true, 'tfoot': true},
'td': {'td': true, 'th': true},
'tfoot': {'tbody': true},
'th': {'td': true, 'th': true},
'thead': {'tbody': true, 'tfoot': true},
'tr': {'tr': true}
},
doNotIndent: {"pre": true},
allowUnquoted: true,
allowMissing: true,
caseFold: true
} : {
autoSelfClosers: {},
implicitlyClosed: {},
contextGrabbers: {},
doNotIndent: {},
allowUnquoted: false,
allowMissing: false,
caseFold: false
};
var alignCDATA = parserConfig.alignCDATA;
// Return variables for tokenizers
var type, setStyle;
function inText(stream, state) {
function chain(parser) {
state.tokenize = parser;
return parser(stream, state);
}
var ch = stream.next();
if (ch == "<") {
if (stream.eat("!")) {
if (stream.eat("[")) {
if (stream.match("CDATA[")) return chain(inBlock("atom", "]]>"));
else return null;
} else if (stream.match("--")) {
return chain(inBlock("comment", "-->"));
} else if (stream.match("DOCTYPE", true, true)) {
stream.eatWhile(/[\w\._\-]/);
return chain(doctype(1));
} else {
return null;
}
} else if (stream.eat("?")) {
stream.eatWhile(/[\w\._\-]/);
state.tokenize = inBlock("meta", "?>");
return "meta";
} else {
type = stream.eat("/") ? "closeTag" : "openTag";
state.tokenize = inTag;
return "tag bracket";
}
} else if (ch == "&") {
var ok;
if (stream.eat("#")) {
if (stream.eat("x")) {
ok = stream.eatWhile(/[a-fA-F\d]/) && stream.eat(";");
} else {
ok = stream.eatWhile(/[\d]/) && stream.eat(";");
}
} else {
ok = stream.eatWhile(/[\w\.\-:]/) && stream.eat(";");
}
return ok ? "atom" : "error";
} else {
stream.eatWhile(/[^&<]/);
return null;
}
}
inText.isInText = true;
function inTag(stream, state) {
var ch = stream.next();
if (ch == ">" || (ch == "/" && stream.eat(">"))) {
state.tokenize = inText;
type = ch == ">" ? "endTag" : "selfcloseTag";
return "tag bracket";
} else if (ch == "=") {
type = "equals";
return null;
} else if (ch == "<") {
state.tokenize = inText;
state.state = baseState;
state.tagName = state.tagStart = null;
var next = state.tokenize(stream, state);
return next ? next + " tag error" : "tag error";
} else if (/[\'\"]/.test(ch)) {
state.tokenize = inAttribute(ch);
state.stringStartCol = stream.column();
return state.tokenize(stream, state);
} else {
stream.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/);
return "word";
}
}
function inAttribute(quote) {
var closure = function(stream, state) {
while (!stream.eol()) {
if (stream.next() == quote) {
state.tokenize = inTag;
break;
}
}
return "string";
};
closure.isInAttribute = true;
return closure;
}
function inBlock(style, terminator) {
return function(stream, state) {
while (!stream.eol()) {
if (stream.match(terminator)) {
state.tokenize = inText;
break;
}
stream.next();
}
return style;
};
}
function doctype(depth) {
return function(stream, state) {
var ch;
while ((ch = stream.next()) != null) {
if (ch == "<") {
state.tokenize = doctype(depth + 1);
return state.tokenize(stream, state);
} else if (ch == ">") {
if (depth == 1) {
state.tokenize = inText;
break;
} else {
state.tokenize = doctype(depth - 1);
return state.tokenize(stream, state);
}
}
}
return "meta";
};
}
function Context(state, tagName, startOfLine) {
this.prev = state.context;
this.tagName = tagName;
this.indent = state.indented;
this.startOfLine = startOfLine;
if (Kludges.doNotIndent.hasOwnProperty(tagName) || (state.context && state.context.noIndent))
this.noIndent = true;
}
function popContext(state) {
if (state.context) state.context = state.context.prev;
}
function maybePopContext(state, nextTagName) {
var parentTagName;
while (true) {
if (!state.context) {
return;
}
parentTagName = state.context.tagName;
if (!Kludges.contextGrabbers.hasOwnProperty(parentTagName) ||
!Kludges.contextGrabbers[parentTagName].hasOwnProperty(nextTagName)) {
return;
}
popContext(state);
}
}
function baseState(type, stream, state) {
if (type == "openTag") {
state.tagStart = stream.column();
return tagNameState;
} else if (type == "closeTag") {
return closeTagNameState;
} else {
return baseState;
}
}
function tagNameState(type, stream, state) {
if (type == "word") {
state.tagName = stream.current();
setStyle = "tag";
return attrState;
} else {
setStyle = "error";
return tagNameState;
}
}
function closeTagNameState(type, stream, state) {
if (type == "word") {
var tagName = stream.current();
if (state.context && state.context.tagName != tagName &&
Kludges.implicitlyClosed.hasOwnProperty(state.context.tagName))
popContext(state);
if (state.context && state.context.tagName == tagName) {
setStyle = "tag";
return closeState;
} else {
setStyle = "tag error";
return closeStateErr;
}
} else {
setStyle = "error";
return closeStateErr;
}
}
function closeState(type, _stream, state) {
if (type != "endTag") {
setStyle = "error";
return closeState;
}
popContext(state);
return baseState;
}
function closeStateErr(type, stream, state) {
setStyle = "error";
return closeState(type, stream, state);
}
function attrState(type, _stream, state) {
if (type == "word") {
setStyle = "attribute";
return attrEqState;
} else if (type == "endTag" || type == "selfcloseTag") {
var tagName = state.tagName, tagStart = state.tagStart;
state.tagName = state.tagStart = null;
if (type == "selfcloseTag" ||
Kludges.autoSelfClosers.hasOwnProperty(tagName)) {
maybePopContext(state, tagName);
} else {
maybePopContext(state, tagName);
state.context = new Context(state, tagName, tagStart == state.indented);
}
return baseState;
}
setStyle = "error";
return attrState;
}
function attrEqState(type, stream, state) {
if (type == "equals") return attrValueState;
if (!Kludges.allowMissing) setStyle = "error";
return attrState(type, stream, state);
}
function attrValueState(type, stream, state) {
if (type == "string") return attrContinuedState;
if (type == "word" && Kludges.allowUnquoted) {setStyle = "string"; return attrState;}
setStyle = "error";
return attrState(type, stream, state);
}
function attrContinuedState(type, stream, state) {
if (type == "string") return attrContinuedState;
return attrState(type, stream, state);
}
return {
startState: function() {
return {tokenize: inText,
state: baseState,
indented: 0,
tagName: null, tagStart: null,
context: null};
},
token: function(stream, state) {
if (!state.tagName && stream.sol())
state.indented = stream.indentation();
if (stream.eatSpace()) return null;
type = null;
var style = state.tokenize(stream, state);
if ((style || type) && style != "comment") {
setStyle = null;
state.state = state.state(type || style, stream, state);
if (setStyle)
style = setStyle == "error" ? style + " error" : setStyle;
}
return style;
},
indent: function(state, textAfter, fullLine) {
var context = state.context;
// Indent multi-line strings (e.g. css).
if (state.tokenize.isInAttribute) {
if (state.tagStart == state.indented)
return state.stringStartCol + 1;
else
return state.indented + indentUnit;
}
if (context && context.noIndent) return CodeMirror.Pass;
if (state.tokenize != inTag && state.tokenize != inText)
return fullLine ? fullLine.match(/^(\s*)/)[0].length : 0;
// Indent the starts of attribute names.
if (state.tagName) {
if (multilineTagIndentPastTag)
return state.tagStart + state.tagName.length + 2;
else
return state.tagStart + indentUnit * multilineTagIndentFactor;
}
if (alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
var tagAfter = textAfter && /^<(\/)?([\w_:\.-]*)/.exec(textAfter);
if (tagAfter && tagAfter[1]) { // Closing tag spotted
while (context) {
if (context.tagName == tagAfter[2]) {
context = context.prev;
break;
} else if (Kludges.implicitlyClosed.hasOwnProperty(context.tagName)) {
context = context.prev;
} else {
break;
}
}
} else if (tagAfter) { // Opening tag spotted
while (context) {
var grabbers = Kludges.contextGrabbers[context.tagName];
if (grabbers && grabbers.hasOwnProperty(tagAfter[2]))
context = context.prev;
else
break;
}
}
while (context && !context.startOfLine)
context = context.prev;
if (context) return context.indent + indentUnit;
else return 0;
},
electricInput: /<\/[\s\w:]+>$/,
blockCommentStart: "<!--",
blockCommentEnd: "-->",
configuration: parserConfig.htmlMode ? "html" : "xml",
helperType: parserConfig.htmlMode ? "html" : "xml"
};
});
CodeMirror.defineMIME("text/xml", "xml");
CodeMirror.defineMIME("application/xml", "xml");
if (!CodeMirror.mimeModes.hasOwnProperty("text/html"))
CodeMirror.defineMIME("text/html", {name: "xml", htmlMode: true});
});