|
0
|
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="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></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/codemirror5">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>
|
