File modules/editor/codemirror/mode/css/gss.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: Closure Stylesheets (GSS) 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 <link rel="stylesheet" href="../../addon/hint/show-hint.css">
     9 <script src="../../lib/codemirror.js"></script>
    10 <script src="css.js"></script>
    11 <script src="../../addon/hint/show-hint.js"></script>
    12 <script src="../../addon/hint/css-hint.js"></script>
    13 <style>.CodeMirror {background: #f8f8f8;}</style>
    14 <div id=nav>
    15   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>
    16 
    17   <ul>
    18     <li><a href="../../index.html">Home</a>
    19     <li><a href="../../doc/manual.html">Manual</a>
    20     <li><a href="https://github.com/codemirror/codemirror">Code</a>
    21   </ul>
    22   <ul>
    23     <li><a href="../index.html">Language modes</a>
    24     <li><a class=active href="#">Closure Stylesheets (GSS)</a>
    25   </ul>
    26 </div>
    27 
    28 <article>
    29 <h2>Closure Stylesheets (GSS) mode</h2>
    30 <form><textarea id="code" name="code">
    31 /* Some example Closure Stylesheets */
    32 
    33 @provide 'some.styles';
    34 
    35 @require 'other.styles';
    36 
    37 @component {
    38 
    39 @def FONT_FAMILY           "Times New Roman", Georgia, Serif;
    40 @def FONT_SIZE_NORMAL      15px;
    41 @def FONT_NORMAL           normal FONT_SIZE_NORMAL FONT_FAMILY;
    42 
    43 @def BG_COLOR              rgb(235, 239, 249);
    44 
    45 @def DIALOG_BORDER_COLOR   rgb(107, 144, 218);
    46 @def DIALOG_BG_COLOR       BG_COLOR;
    47 
    48 @def LEFT_HAND_NAV_WIDTH    180px;
    49 @def LEFT_HAND_NAV_PADDING  3px;
    50 
    51 @defmixin size(WIDTH, HEIGHT) {
    52   width: WIDTH;
    53   height: HEIGHT;
    54 }
    55 
    56 body {
    57   background-color: BG_COLOR;
    58   margin: 0;
    59   padding: 3em 6em;
    60   font: FONT_NORMAL;
    61   color: #000;
    62 }
    63 
    64 #navigation a {
    65   font-weight: bold;
    66   text-decoration: none !important;
    67 }
    68 
    69 .dialog {
    70   background-color: DIALOG_BG_COLOR;
    71   border: 1px solid DIALOG_BORDER_COLOR;
    72 }
    73 
    74 .content {
    75   position: absolute;
    76   margin-left: add(LEFT_HAND_NAV_PADDING,  /* padding left */
    77                    LEFT_HAND_NAV_WIDTH,
    78                    LEFT_HAND_NAV_PADDING); /* padding right */
    79 
    80 }
    81 
    82 .logo {
    83   @mixin size(150px, 55px);
    84   background-image: url('http://www.google.com/images/logo_sm.gif');
    85 }
    86 
    87 }
    88 </textarea></form>
    89     <script>
    90       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    91         extraKeys: {"Ctrl-Space": "autocomplete"},
    92         lineNumbers: true,
    93         matchBrackets: "text/x-less",
    94         mode: "text/x-gss"
    95       });
    96     </script>
    97 
    98     <p>A mode for <a href="https://github.com/google/closure-stylesheets">Closure Stylesheets</a> (GSS).</p>
    99     <p><strong>MIME type defined:</strong> <code>text/x-gss</code>.</p>
   100 
   101     <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#gss_*">normal</a>,  <a href="../../test/index.html#verbose,gss_*">verbose</a>.</p>
   102 
   103   </article>



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