Added a mode for Ejs

whalefood · marijnh · commit 42bcd3f06ef7 · 2011-12-13T08:56:51.000+01:00
diff --git a/index.html b/index.html
@@ -40,6 +40,7 @@ <h2 style="margin-top: 0">Supported modes:</h2>
       <li><a href="mode/coffeescript/index.html">CoffeeScript</a></li>
       <li><a href="mode/css/index.html">CSS</a></li>
       <li><a href="mode/diff/index.html">diff</a></li>
+      <li><a href="mode/ejs/index.html">Ejs</a></li>
       <li><a href="mode/groovy/index.html">Groovy</a></li>
       <li><a href="mode/haskell/index.html">Haskell</a></li>
       <li><a href="mode/htmlmixed/index.html">HTML mixed-mode</a></li>
diff --git a/mode/ejs/ejs.js b/mode/ejs/ejs.js
@@ -0,0 +1,57 @@
+CodeMirror.defineMode("ejs", function(config, parserConfig) {
+  var htmlMixedMode = CodeMirror.getMode(config, "htmlmixed");
+  var serversideJsMode = CodeMirror.getMode(config, "javascript");
+  
+  function clientSide(stream, state) {
+      if (stream.match(/^<%/i, false)) {
+          state.token=serversideJavascript;
+          return serversideJsMode.token(stream, state.jsState);
+          }
+      else
+          return htmlMixedMode.token(stream, state.htmlState);
+    }
+
+  function serversideJavascript(stream, state) {
+      if (stream.match(/^%>/i, false))  {
+          state.token=clientSide;
+          return htmlMixedMode.token(stream, state.htmlState);
+         }
+      else
+          return serversideJsMode.token(stream, state.jsState);
+         }
+
+
+  return {
+    startState: function() {
+      return { 
+          token : clientSide,
+          htmlState : htmlMixedMode.startState(),
+          jsState : serversideJsMode.startState()
+          }
+    },
+
+    token: function(stream, state) {
+      return state.token(stream, state);
+    },
+
+    indent: function(state, textAfter) {
+      if (state.token == clientSide)
+        return htmlMixedMode.indent(state.htmlState, textAfter);
+      else
+        return serversideJsMode.indent(state.jsState, textAfter);
+    },
+    
+    copyState: function(state) {
+      return {
+       token : state.token,
+       htmlState : CodeMirror.copyState(htmlMixedMode, state.htmlState),
+       jsState : CodeMirror.copyState(serversideJsMode, state.jsState)
+       }
+    },
+    
+
+    electricChars: "/{}:"
+  }
+});
+
+CodeMirror.defineMIME("application/x-ejs", "ejs");
diff --git a/mode/ejs/index.html b/mode/ejs/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: Ejs mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="../xml/xml.js"></script>
+    <script src="../javascript/javascript.js"></script>
+    <script src="../css/css.js"></script>
+    <script src="../htmlmixed/htmlmixed.js"></script>
+    <script src="ejs.js"></script>
+    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
+    <link rel="stylesheet" href="../../doc/docs.css">
+  </head>
+  <body>
+    <h1>CodeMirror 2: Ejs mode</h1>
+
+<form><textarea id="code" name="code">
+<%
+function hello(who) {
+	return "Hello " + who;
+}
+%>
+<p>The program says <%= hello("World") %>.</p>
+<script>
+	alert("And here is some JS code"); // also colored
+</script>
+</textarea></form>
+
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        matchBrackets: true,
+        mode: "application/x-ejs",
+        indentUnit: 4,
+        indentWithTabs: true,
+        enterMode: "keep",
+        tabMode: "shift"
+      });
+    </script>
+
+    <p>Simple HTML/EJS mode. Depends on XML,
+    JavaScript, CSS and HtmlMixed modes.</p>
+
+    <p><strong>MIME types defined:</strong> <code>application/x-ejs</code></p>
+  </body>
+</html>
