index.html 2.4 KB

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