| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <!doctype html> | ||
|
|
||
| <title>CodeMirror: Vue.js mode</title> | ||
| <meta charset="utf-8"/> | ||
| <link rel=stylesheet href="../../doc/docs.css"> | ||
|
|
||
| <link rel="stylesheet" href="../../lib/codemirror.css"> | ||
| <script src="../../lib/codemirror.js"></script> | ||
| <script src="../../addon/mode/overlay.js"></script> | ||
| <script src="../../addon/mode/simple.js"></script> | ||
| <script src="../../addon/selection/selection-pointer.js"></script> | ||
| <script src="../xml/xml.js"></script> | ||
| <script src="../javascript/javascript.js"></script> | ||
| <script src="../css/css.js"></script> | ||
| <script src="../coffeescript/coffeescript.js"></script> | ||
| <script src="../sass/sass.js"></script> | ||
| <script src="../jade/jade.js"></script> | ||
|
|
||
| <script src="../handlebars/handlebars.js"></script> | ||
| <script src="../htmlmixed/htmlmixed.js"></script> | ||
| <script src="vue.js"></script> | ||
| <style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style> | ||
| <div id=nav> | ||
| <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a> | ||
|
|
||
| <ul> | ||
| <li><a href="../../index.html">Home</a> | ||
| <li><a href="../../doc/manual.html">Manual</a> | ||
| <li><a href="https://github.com/codemirror/codemirror">Code</a> | ||
| </ul> | ||
| <ul> | ||
| <li><a href="../index.html">Language modes</a> | ||
| <li><a class=active href="#">Vue.js mode</a> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <article> | ||
| <h2>Vue.js mode</h2> | ||
| <form><textarea id="code" name="code"> | ||
| <template> | ||
| <div class="sass">Im am a {{mustache-like}} template</div> | ||
| </template> | ||
|
|
||
| <script lang="coffee"> | ||
| module.exports = | ||
| props: ['one', 'two', 'three'] | ||
| </script> | ||
|
|
||
| <style lang="sass"> | ||
| .sass | ||
| font-size: 18px | ||
| </style> | ||
|
|
||
| </textarea></form> | ||
| <script> | ||
| // Define an extended mixed-mode that understands vbscript and | ||
| // leaves mustache/handlebars embedded templates in html mode | ||
| var mixedMode = { | ||
| name: "vue" | ||
| }; | ||
| var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | ||
| mode: mixedMode, | ||
| selectionPointer: true | ||
| }); | ||
| </script> | ||
|
|
||
| <p><strong>MIME types defined:</strong> <code>text/x-vue</code></p> | ||
|
|
||
| </article> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| // CodeMirror, copyright (c) by Marijn Haverbeke and others | ||
| // Distributed under an MIT license: http://codemirror.net/LICENSE | ||
|
|
||
| (function (mod) { | ||
| "use strict"; | ||
| if (typeof exports === "object" && typeof module === "object") {// CommonJS | ||
| mod(require("../../lib/codemirror"), | ||
| require("../../addon/mode/overlay"), | ||
| require("../xml/xml"), | ||
| require("../javascript/javascript"), | ||
| require("../coffeescript/coffeescript"), | ||
| require("../css/css"), | ||
| require("../sass/sass"), | ||
| require("../stylus/stylus"), | ||
| require("../jade/jade"), | ||
| require("../handlebars/handlebars")); | ||
| } else if (typeof define === "function" && define.amd) { // AMD | ||
| define(["../../lib/codemirror", | ||
| "../../addon/mode/overlay", | ||
| "../xml/xml", | ||
| "../javascript/javascript", | ||
| "../coffeescript/coffeescript", | ||
| "../css/css", | ||
| "../sass/sass", | ||
| "../stylus/stylus", | ||
| "../jade/jade", | ||
| "../handlebars/handlebars"], mod); | ||
| } else { // Plain browser env | ||
| mod(CodeMirror); | ||
| } | ||
| })(function (CodeMirror) { | ||
| var tagLanguages = { | ||
| script: [ | ||
| ["lang", /coffee(script)?/, "coffeescript"], | ||
| ["type", /^(?:text|application)\/(?:x-)?coffee(?:script)?$/, "coffeescript"] | ||
| ], | ||
| style: [ | ||
| ["lang", /^stylus$/i, "stylus"], | ||
| ["lang", /^sass$/i, "sass"], | ||
| ["type", /^(text\/)?(x-)?styl(us)?$/i, "stylus"], | ||
| ["type", /^text\/sass/i, "sass"] | ||
| ], | ||
| template: [ | ||
| ["lang", /^vue-template$/i, "vue"], | ||
| ["lang", /^jade$/i, "jade"], | ||
| ["lang", /^handlebars$/i, "handlebars"], | ||
| ["type", /^(text\/)?(x-)?jade$/i, "jade"], | ||
| ["type", /^text\/x-handlebars-template$/i, "handlebars"], | ||
| [null, null, "vue-template"] | ||
| ] | ||
| }; | ||
|
|
||
| CodeMirror.defineMode("vue-template", function (config, parserConfig) { | ||
| var mustacheOverlay = { | ||
| token: function (stream) { | ||
| if (stream.match(/^\{\{.*?\}\}/)) return "meta mustache"; | ||
| while (stream.next() && !stream.match("{{", false)) {} | ||
| return null; | ||
| } | ||
| }; | ||
| return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay); | ||
| }); | ||
|
|
||
| CodeMirror.defineMode("vue", function (config) { | ||
| return CodeMirror.getMode(config, {name: "htmlmixed", tags: tagLanguages}); | ||
| }, "htmlmixed", "xml", "javascript", "coffeescript", "css", "sass", "stylus", "jade", "handlebars"); | ||
|
|
||
| CodeMirror.defineMIME("script/x-vue", "vue"); | ||
| }); |