|
0
|
1 <!doctype html>
|
|
|
2
|
|
|
3 <title>CodeMirror: Ruler Demo</title>
|
|
|
4 <meta charset="utf-8"/>
|
|
|
5 <link rel=stylesheet href="../doc/docs.css">
|
|
|
6
|
|
|
7 <link rel="stylesheet" href="../lib/codemirror.css">
|
|
|
8 <script src="../lib/codemirror.js"></script>
|
|
|
9 <script src="../addon/display/rulers.js"></script>
|
|
|
10 <style>
|
|
|
11 .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
|
|
|
12 </style>
|
|
|
13 <div id=nav>
|
|
|
14 <a href="https://codemirror.net/5"><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/codemirror5">Code</a>
|
|
|
20 </ul>
|
|
|
21 <ul>
|
|
|
22 <li><a class=active href="#">Ruler demo</a>
|
|
|
23 </ul>
|
|
|
24 </div>
|
|
|
25
|
|
|
26 <article>
|
|
|
27 <h2>Ruler Demo</h2>
|
|
|
28
|
|
|
29 <script>
|
|
|
30 var nums = "0123456789", space = " ";
|
|
|
31 var colors = ["#fcc", "#f5f577", "#cfc", "#aff", "#ccf", "#fcf"];
|
|
|
32 var rulers = [], value = "";
|
|
|
33 for (var i = 1; i <= 6; i++) {
|
|
|
34 rulers.push({color: colors[i], column: i * 10, lineStyle: "dashed"});
|
|
|
35 for (var j = 1; j < i; j++) value += space;
|
|
|
36 value += nums + "\n";
|
|
|
37 }
|
|
|
38 var editor = CodeMirror(document.body.lastChild, {
|
|
|
39 rulers: rulers,
|
|
|
40 value: value + value + value,
|
|
|
41 lineNumbers: true
|
|
|
42 });
|
|
|
43 </script>
|
|
|
44
|
|
|
45 <p>Demonstration of
|
|
|
46 the <a href="../doc/manual.html#addon_rulers">rulers</a> addon, which
|
|
|
47 displays vertical lines at given column offsets.</p>
|
|
|
48
|
|
|
49 </article>
|
