index.html (2472B)
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>