Mercurial
comparison .cms/lib/codemirror/mode/stylus/index.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
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> |