File modules/editor/codemirror/mode/stylus/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: Stylus mode</title>
     4 <meta charset="utf-8"/>
     5 <link rel=stylesheet href="../../doc/docs.css">
     6 <link rel="stylesheet" href="../../lib/codemirror.css">
     7 <link rel="stylesheet" href="../../addon/hint/show-hint.css">
     8 <script src="../../lib/codemirror.js"></script>
     9 <script src="stylus.js"></script>
    10 <script src="../../addon/hint/show-hint.js"></script>
    11 <script src="../../addon/hint/css-hint.js"></script>
    12 <style>.CodeMirror {background: #f8f8f8;} form{margin-bottom: .7em;}</style>
    13 <div id=nav>
    14   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>
    15 
    16   <ul>
    17     <li><a href="../../index.html">Home</a>
    18     <li><a href="../../doc/manual.html">Manual</a>
    19     <li><a href="https://github.com/codemirror/codemirror">Code</a>
    20   </ul>
    21   <ul>
    22     <li><a href="../index.html">Language modes</a>
    23     <li><a class=active href="#">Stylus</a>
    24   </ul>
    25 </div>
    26 
    27 <article>
    28 <h2>Stylus mode</h2>
    29 <form><textarea id="code" name="code">
    30 /* Stylus mode */
    31 
    32 #id,
    33 .class,
    34 article
    35   font-family Arial, sans-serif
    36 
    37 #id,
    38 .class,
    39 article {
    40   font-family: Arial, sans-serif;
    41 }
    42 
    43 // Variables
    44 font-size-base = 16px
    45 line-height-base = 1.5
    46 font-family-base = "Helvetica Neue", Helvetica, Arial, sans-serif
    47 text-color = lighten(#000, 20%)
    48 
    49 body
    50   font font-size-base/line-height-base font-family-base
    51   color text-color
    52 
    53 body {
    54   font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    55   color: #333;
    56 }
    57 
    58 // Variables
    59 link-color = darken(#428bca, 6.5%)
    60 link-hover-color = darken(link-color, 15%)
    61 link-decoration = none
    62 link-hover-decoration = false
    63 
    64 // Mixin
    65 tab-focus()
    66   outline thin dotted
    67   outline 5px auto -webkit-focus-ring-color
    68   outline-offset -2px
    69 
    70 a
    71   color link-color
    72   if link-decoration
    73     text-decoration link-decoration
    74   &:hover
    75   &:focus
    76     color link-hover-color
    77     if link-hover-decoration
    78       text-decoration link-hover-decoration
    79   &:focus
    80     tab-focus()
    81 
    82 a {
    83   color: #3782c4;
    84   text-decoration: none;
    85 }
    86 a:hover,
    87 a:focus {
    88   color: #2f6ea7;
    89 }
    90 a:focus {
    91   outline: thin dotted;
    92   outline: 5px auto -webkit-focus-ring-color;
    93   outline-offset: -2px;
    94 }
    95 </textarea>
    96 </form>
    97 <script>
    98   var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    99     extraKeys: {"Ctrl-Space": "autocomplete"},
   100     tabSize: 2
   101   });
   102 </script>
   103 
   104 <p><strong>MIME types defined:</strong> <code>text/x-styl</code>.</p>
   105 <p>Created by <a href="https://github.com/dmitrykiselyov">Dmitry Kiselyov</a></p>
   106 </article>



Download modules/editor/codemirror/mode/stylus/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.