https://codemirror.net/try/

1<!doctype html>
2<html lang=en-US>
3<meta charset=utf8>
4<meta name="viewport" content="width=device-width, initial-scale=1"><title>Try CodeMirror</title>
5<link rel=stylesheet href=./../style/site.css>
6<link rel=icon href=./../style/logo.svg>
7
8<header>
9  <nav>
10    <a class=logo href="./../">CodeMirror</a>
11    <div class=navlinks>
12      <a href="./../examples/" >Examples</a>
13      <a href="./../docs/" >Documentation</a>
14      <a href="./../try/" class=active>Try</a>
15      <a href="https://discuss.codemirror.net/">Discuss</a>
16      <a href="https://code.haverbeke.berlin/codemirror/dev/">Code</a>
17      <a href="https://codemirror.net/5/">Version 5</a>
18    </div>
19  </nav>
20</header><style>
21  #controls {
22    display: flex;
23    flex-wrap: wrap;
24    column-gap: 10px;
25  }
26  #controls > * {
27    margin-bottom: 5px;
28  }
29  #controls button {
30    font-family: sans-serif;
31    background: #eee;
32    border: 1px solid #666;
33    border-radius: 5px;
34    padding: 2px 5px;
35  }
36  #controls button.active {
37    background: #eef;
38    border-color: #55b;
39    color: #005;
40  }
41  #controls button:hover {
42    background: white;
43  }
44  #controls button:active {
45    background: #ccc;
46  }
47  #controls .separator {
48    flex-grow: 1;
49  }
50
51  #surface {
52    display: flex;
53    align-content: stretch;
54    align-items: stretch;
55    height: 80vh;
56    position: relative;
57    border: 1px solid #666;
58  }
59  #editor, #output, #log {
60    flex-basis: 100%;
61    width: 100%;
62    box-sizing: border-box;
63    display: none;
64  }
65  #log {
66    overflow-y: auto;
67    padding: 3px 7px;
68    font-size: 80%;
69  }
70  #output iframe {
71    width: 100%;
72    height: 100%;
73    border: none;
74  }
75  #editor .cm-editor {
76    height: 100%;
77    max-height: none;
78    border: none;
79  }
80  #editor .cm-scroller {
81    overflow: auto;
82  }
83
84  .notification {
85    position: fixed;
86    background: #ffd;
87    border: 1px solid #880;
88    border-radius: 3px;
89    padding: 2px 5px;
90  }
91
92  @media screen and (min-width: 1200px) {
93    #tab_editor { display: none }
94    article, header, footer nav { max-width: 1150px; }
95    #editor { display: block !important; border-right: 1px solid #666; }
96    #editor, #output, #log { flex-basis: 50%; width: 50%; }
97  }
98  @media screen and (max-width: 570px) {
99    #controls .separator {
100      flex-basis: 100%;
101    }
102  }
103
104  .log-prop-table {
105    display: grid;
106    grid-template-columns: auto 1fr;
107    padding-left: 1em;
108  }
109  .log-prop-table > .tok-property {
110    justify-self: end;
111  }
112  .log-etc {
113    border: none;
114    color: #060;
115    text-decoration: underline;
116    padding: 0;
117    background: transparent;
118    font-size: inherit;
119    font-family: inherit;
120    cursor: pointer;
121  }
122  .log-frames {
123    color: #338;
124    margin-left: 1em;
125  }
126  .log-log {
127    font-family: monospace;
128  }
129</style>
130

131<script defer src="../codemirror.js"></script>

131

132<script defer src="try.js"></script>

132
133
134<article>
135
136<h1>Try CodeMirror</h1>
137
138<p>Write a program to define an editor, then see what the resulting editor looks like. This can be useful to try things out or to share scripts to explain something or illustrate a bug report.</p>
139
140<div id=controls>
141  <button id=run title="Run code (Ctrl-Enter)" aria-title="Run code (Ctrl-Enter)">Run</button>
142  <button id=share aria-title="Share code">Share</button>
143  <select id=examples aria-title="Example list"><option>Select example...</option></select>
144  <div class=separator></div>
145  <button id=tab_editor title="Show code (Ctrl-Shift-1)" aria-label="Show code (Ctrl-Shift-1)">Code</button>
146  <button id=tab_output title="Show output (Ctrl-Shift-2)" aria-label="Show code (Ctrl-Shift-2)">Output</button>
147  <button id=tab_log title="Show log (Ctrl-Shift-3)" aria-label="Show log (Ctrl-Shift-3)">Log</button>
148</div>
149
150<div id=surface>
151  <div id=editor></div>
152  <div id=output></div>
153  <div id=log></div>
154</div>
155
156<p><code>@codemirror</code> and <code>@lezer</code> packages can be
157imported directly by name. Other imports should be URLs. You'll
158usually want your script to create an editor
159in <code>document.body</code>. Press Ctrl-Enter to run the current
160code, and see the result (boxed in an <code>&lt;iframe></code>) in the
161“Output” tab. When errors occur or things are logged to the console,
162you can find them in the “Log” tab.</p>
163
164<p>See the <a href="../examples/bundle/">bundling example</a> for
165information on how to set up an editor like this on your own
166pages.</p>
167
168</article><footer>
169  <nav>
170    <div class=navlinks>
171      <a href="http://contributor-covenant.org/version/1/1/0/">Code of Conduct</a>
172      <a href="https://code.haverbeke.berlin/codemirror/dev/issues">Report an Issue</a>
173    </div>
174  </nav>
175</footer>
176
177</html>