File modules/editor/codemirror/mode/vue/index.html

Last commit: Sun Dec 17 01:14:09 2017 +0100	Jan Dankert	Integration eines weiteren Code-Editors: Codemirror. Demnächst müssen wir hier mal aufräumen und andere Editoren rauswerfen.


     1 <!doctype html>
     2 
     3 <title>CodeMirror: Vue.js mode</title>
     4 <meta charset="utf-8"/>
     5 <link rel=stylesheet href="../../doc/docs.css">
     6 
     7 <link rel="stylesheet" href="../../lib/codemirror.css">
     8 <script src="../../lib/codemirror.js"></script>
     9 <script src="../../addon/mode/overlay.js"></script>
    10 <script src="../../addon/mode/simple.js"></script>
    11 <script src="../../addon/selection/selection-pointer.js"></script>
    12 <script src="../xml/xml.js"></script>
    13 <script src="../javascript/javascript.js"></script>
    14 <script src="../css/css.js"></script>
    15 <script src="../coffeescript/coffeescript.js"></script>
    16 <script src="../sass/sass.js"></script>
    17 <script src="../pug/pug.js"></script>
    18 
    19 <script src="../handlebars/handlebars.js"></script>
    20 <script src="../htmlmixed/htmlmixed.js"></script>
    21 <script src="vue.js"></script>
    22 <style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
    23 <div id=nav>
    24   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>
    25 
    26   <ul>
    27     <li><a href="../../index.html">Home</a>
    28     <li><a href="../../doc/manual.html">Manual</a>
    29     <li><a href="https://github.com/codemirror/codemirror">Code</a>
    30   </ul>
    31   <ul>
    32     <li><a href="../index.html">Language modes</a>
    33     <li><a class=active href="#">Vue.js mode</a>
    34   </ul>
    35 </div>
    36 
    37 <article>
    38 <h2>Vue.js mode</h2>
    39 <form><textarea id="code" name="code">
    40 <template>
    41   <div class="sass">Im am a {{mustache-like}} template</div>
    42 </template>
    43 
    44 <script lang="coffee">
    45   module.exports =
    46     props: ['one', 'two', 'three']
    47 </script>
    48 
    49 <style lang="sass">
    50 .sass
    51   font-size: 18px
    52 </style>
    53 
    54 </textarea></form>
    55     <script>
    56       // Define an extended mixed-mode that understands vbscript and
    57       // leaves mustache/handlebars embedded templates in html mode
    58       var mixedMode = {
    59         name: "vue"
    60       };
    61       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    62         mode: mixedMode,
    63         selectionPointer: true
    64       });
    65     </script>
    66 
    67     <p><strong>MIME types defined:</strong> <code>text/x-vue</code></p>
    68 
    69   </article>



Download modules/editor/codemirror/mode/vue/index.html


History
Sun, 17 Dec 2017 01:14:09 +0100	Jan Dankert	Integration eines weiteren Code-Editors: Codemirror. Demnächst müssen wir hier mal aufräumen und andere Editoren rauswerfen.