forked from ajaxorg/ace
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1193 lines (1136 loc) · 84.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ace - The High Performance Code Editor for the Web</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css" />
<link href="./doc/site/style.css" rel="stylesheet" type="text/css" />
<link href="./doc/site/images/favicon.ico" rel="icon" type="image/x-icon" />
<script src="./build/src/ace.js"></script>
<script src="./build/src/ext-static_highlight.js"></script>
<!--[if lt IE 9]>
<script src="./build/src/ext-old_ie.js"></script>
<![endif]-->
</head>
<body>
<a href="https://github.com/ajaxorg/ace">
<img style="z-index: 50000; position: absolute; top: 0; right: 0; border: 0; width: 125px; height: 125px" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" alt="Fork me on GitHub">
</a>
<div id="wrapper">
<div class="content">
<div class="column2">
<div id="top_container">
<h1><img src="./doc/site/images/textimage.png" alt="The high performance code editor for the web." /></h1>
<div id="page_logo">
<img src="./doc/site/images/ace-logo.png" />
<iframe style="padding-top:5px" src="https://ghbtns.com/github-btn.html?user=ajaxorg&repo=ace&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=ajaxorg&repo=ace&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
</div>
</div>
<div style="clear: both"></div>
<ul id="tabnav" class="nav nav-pills">
<li>
<a href="/"><img src="./doc/site/images/ace-tab.png" /></a>
</li>
<li>
<a href="#about" data-toggle="tab">About</a>
</li>
<li>
<a href="#embedding" data-toggle="tab">Embedding Guide</a>
</li>
<li>
<a href="#howto" data-toggle="tab">How-To Guide</a>
</li>
<li>
<a href="#higlighter" data-toggle="tab">Syntax Highlighters</a>
</li>
<li>
<a href="https://ajaxorg.github.io/ace-api-docs/index.html" target="_blank" rel="noopener noreferrer" class="external-nav">API Reference</a>
</li>
<li>
<a href="#production" data-toggle="tab">Real World Users</a>
</li>
<li class="last-tab">
<a href="https://mkslanc.github.io/ace-playground/" target="_blank" rel="noopener noreferrer" class="external-nav">Try</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="about">
<h1>Built for Code</h1>
<p id="first">Ace is an embeddable code editor written in JavaScript.
It matches the features and performance of native
editors such as Sublime, Vim and TextMate. It can be easily embedded
in any web page and JavaScript application. Ace is maintained as the
primary editor for <a href="https://c9.io">Cloud9 IDE</a>
and is the successor of the Mozilla Skywriter (Bespin) project.
</p>
<pre id="ace_editor_demo" style="opacity:0">/**
* In fact, you're looking at ACE right now. Go ahead and play with it!
*
* We are currently showing off the JavaScript mode. ACE has support for 45
* language modes and 24 color themes!
*/
function add(x, y) {
var resultString = "Hello, ACE! The result of your math is: ";
var result = x + y;
return resultString + result;
}
var addResult = add(3, 2);
console.log(addResult);
</pre>
<p id="embed_link"><a href="#nav=embedding">Learn how to embed this in your own site</a></p>
<p class="highlight_note">Looking for a more full-featured demo? Check out the
<a href="build/kitchen-sink.html" target="_blank" rel="noopener noreferrer">kitchen sink</a>.
</p>
<h2>Features</h2>
<ul class="content-list">
<li><a href="https://pcwalton.blogspot.com/2010/11/syntax-highlighting-specification.html">Syntax highlighting</a> for over 110 languages (TextMate/Sublime Text<em>.tmlanguage</em> files can be imported)</li>
<li>Over 20 themes (TextMate/Sublime Text <em>.tmtheme</em> files can be imported)</li>
<li>Automatic indent and outdent</li>
<li>An optional command line</li>
<li>Handles huge documents (four million lines seems to be the limit!)</li>
<li>Fully customizable key bindings including vim and Emacs modes</li>
<li>Search and replace with regular expressions</li>
<li>Highlight matching parentheses</li>
<li>Toggle between soft tabs and real tabs</li>
<li>Displays hidden characters</li>
<li>Drag and drop text using the mouse</li>
<li>Line wrapping</li>
<li>Code folding</li>
<li>Multiple cursors and selections</li>
<li>Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)</li>
<li>Cut, copy, and paste functionality</li>
</ul>
<h2>Get the Open-Source Code</h2>
<p>Ace is a community project. We actively encourage and support
contributions! The Ace source code is <a href="https://github.com/ajaxorg/ace">hosted on GitHub</a>
and released under the BSD license ‐
very simple and friendly to all kinds of projects, whether open-source
or not. Take charge of your editor and add your favorite language
highlighting and keybindings!
</p>
<pre>git clone git://github.com/ajaxorg/ace.git</pre>
<h2>History</h2>
<p>Skywriter/Bespin and Ace started
as two independent projects both aiming to build a no compromise
code editor component for the web. Bespin started as part of
Mozilla Labs and was based on the <canvas> tag, while Ace is
the editor component of <a href="https://c9.io">Cloud9 IDE</a>
and uses the DOM for rendering. After the release of Ace at
<a href="https://www.youtube.com/watch?v=hN_7tAKh0dM" title="[JSConfEU 2010] Fabian Jakobs: Kick ass code editing and end to end JavaScript debugging">JSConf.eu 2010</a>
in Berlin the Skywriter team decided to merge Ace with a simplified
version of Skywriter's plugin system and some of Skywriter's
extensibility points. All these changes have been merged back to Ace
now, which supersedes Skywriter. Both <a href="https://c9.io">Cloud9 IDE</a>
and <a href="https://mozilla.org">Mozilla</a> are actively developing and
maintaining Ace.
</p>
<h2>Related Projects</h2>
<ul class="content-list">
<li><a href="https://github.com/convergencelabs/ace-collab-ext">Ace collaboration extension</a></li>
<li><a href="https://github.com/rksm/paredit.js">Paredit extension for ace</a></li>
<li><a href="https://github.com/cadorn/ace-extjs">Ace wrapper for ExtJS</a></li>
<li><a href="https://github.com/daveho/AceGWT">Ace wrapper for GWT</a></li>
</ul>
<h2>Getting Help</h2>
<ul class="content-list">
<li><a href="https://github.com/ajaxorg/ace/issues">Report bugs</a></li>
<li><a href="https://github.com/ajaxorg/ace/discussions">Discuss</a></li>
</ul>
</div>
<div class="tab-pane fade active in" id="embedding">
<h1>Embedding Ace in Your Site</h1>
<p>Ace can be easily embedded into a web page. Get prebuilt version of ace from
<a href="https://github.com/ajaxorg/ace-builds/">ace-builds</a> repository and use the code below:</p>
<pre id="embedded_ace_code" style="opacity:0"><!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}</div>
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
</script>
</body>
</html></pre>
<p>Now check out the <a href="#nav=howto">How-To Guide</a> for instructions on
common operations, such as setting a different language mode or
getting the contents from the editor.
</p>
<h2>Loading Ace from a Local URL</h2>
<p>If you want to clone and host Ace locally you can
use one of the <a href="https://github.com/ajaxorg/ace-builds/">pre-packaged versions</a>. Just copy
one of <code>src*</code> subdirectories somewhere into your project, or use RequireJS to load the
contents of <a href="https://github.com/ajaxorg/ace/tree/master/lib/ace">lib/ace</a> folder as <code>ace</code>:
</p>
<h2>Loading Ace from a CDN</h2>
<p>The packaged version can also be loaded from CDN's such as <a href="https://www.jsdelivr.com/package/npm/ace-builds">jsDelivr</a> or <a href="http://cdnjs.com/libraries/ace/">cdnjs</a>.
</p>
</div>
<div class="tab-pane fade" id="howto">
<h1>Working with Ace</h1>
<p><em>In all of these examples Ace has been invoked
as shown in the <a href="#nav=embedding">embedding guide</a>.</em>
</p>
<h2>Configuring the editor</h2>
<p>there are several ways to pass configuration to Ace</p>
<pre><code class="javascript">// pass options to ace.edit
ace.edit(element, {
mode: "ace/mode/javascript",
selectionStyle: "text"
})
// use setOptions method to set several options at once
editor.setOptions({
autoScrollEditorIntoView: true,
copyWithEmptySelection: true,
});
// use setOptions method
editor.setOption("mergeUndoDeltas", "always");
// some options are also available as methods e.g.
editor.setTheme(...)
// to get the value of the option use
editor.getOption("optionName");
</code>
</pre>
<p>See <a href="https://github.com/ajaxorg/ace/wiki/Configuring-Ace">Configuring-Ace wiki page</a> for a more detailed list of options.</p>
<h3>Changing the size of the editor</h3>
<p>Ace only checks for changes of the size of it's container when window is resized. If you resize the editor div in another manner, and need Ace to resize, use the following:</p>
<pre><code class="javascript">editor.resize()</code></pre>
<p>if you want editor to change it's size based on contents, use maxLines option as shown in <a target="_blank" rel="noopener noreferrer" href="https://ace.c9.io/demo/autoresize.html">https://ace.c9.io/demo/autoresize.html</a></p>
<h2>Setting Themes</h2>
<p>Themes are loaded on demand; all you have to do is pass the string name:</p>
<pre><code class="javascript">editor.setTheme("ace/theme/twilight");</code></pre>
<p><span class="expand_arrow">></span> <a href="https://github.com/ajaxorg/ace/tree/master/src/theme" target="_blank" rel="noopener noreferrer">See all themes.</a>
Or use <a href="https://github.com/ajaxorg/ace/blob/master/src/ext/themelist.js" target="_blank" rel="noopener noreferrer">themelist extension</a> to get the list of available themes at runtime.
</p>
<h2>Setting the Programming Language Mode</h2>
<p>By default, the editor supports plain text mode. All other language modes are available as separate modules, loaded on demand like this:</p>
<pre><code class="javascript">editor.session.setMode("ace/mode/javascript");</code></pre>
<h2>One Editor, Multiple Sessions</h2>
<p>Ace keeps everything about the state of the editor (selection, scroll position, etc.)
in <code class="javascript">editor.session</code>. This means you can grab the
session, store it in a var, and set the editor to another session (e.g. a tabbed editor).</p>
<p>You might accomplish this like so:</p>
<pre><code class="javascript">var js = ace.createEditSession("some js code");
var css = ace.createEditSession(["some", "css", "code here"]);
// and then to load document into editor, just call
editor.setSession(js);</code></pre>
<h2>Common Operations</h2>
<p>Set and get content:</p>
<pre><code class="javascript">editor.setValue("the new text here");
editor.setValue("text2", -1); // set value and move cursor to the start of the text
editor.session.setValue("the new text here"); // set value and reset undo history
editor.getValue(); // or session.getValue</code></pre>
<p>Get selected text:</p>
<pre><code class="javascript">editor.getSelectedText(); // or for a specific range
editor.session.getTextRange(editor.getSelectionRange()); </code></pre>
<p>Insert at cursor, emulating user input:</p>
<pre><code class="javascript">editor.insert("Something cool");</code></pre>
<p>Replace text in range:</p>
<pre><code class="javascript">editor.session.replace(new ace.Range(0, 0, 1, 1), "new text");</code></pre>
<p>Get the current cursor line and column:</p>
<pre><code class="javascript">editor.selection.getCursor();</code></pre>
<p>Go to a line:</p>
<pre><code class="javascript">editor.gotoLine(lineNumber);</code></pre>
<p>Get total number of lines:</p>
<pre><code class="javascript">editor.session.getLength();</code></pre>
<p>Set the default tab size:</p>
<pre><code class="javascript">editor.session.setTabSize(4);</code></pre>
<p>Use soft tabs:</p>
<pre><code class="javascript">editor.session.setUseSoftTabs(true);</code></pre>
<p>Set the font size:</p>
<pre><code class="javascript">document.getElementById('editor').style.fontSize='12px';</code></pre>
<p>Toggle word wrapping:</p>
<pre><code class="javascript">editor.session.setUseWrapMode(true);</code></pre>
<p>Set line highlighting:</p>
<pre><code class="javascript">editor.setHighlightActiveLine(false);</code></pre>
<p>Set the print margin visibility:</p>
<pre><code class="javascript">editor.setShowPrintMargin(false);</code></pre>
<p>Set the editor to read-only:</p>
<pre><code class="javascript">editor.setReadOnly(true); // false to make it editable</code></pre>
<h3>Using undo manager</h3>
<p>To group undo delta of the next edit with the previous one set `mergeUndoDeltas` to true</p>
<pre><code class="language-javascript">editor.session.mergeUndoDeltas = true;
editor.session.insert({row: 0, column:0}, Date()+"");</code></pre>
<p>To start new undo group use `markUndoGroup` method</p>
<pre><code class="language-javascript">editor.insertSnippet("a$0b");
editor.session.markUndoGroup();
editor.insertSnippet("x$0y");</code></pre>
<p>To disable undo of a an edit in a collaborative editor</p>
<pre><code class="language-javascript">var rev = session.$undoManager.startNewGroup(); // start new undo group
... // apply the edit
session.$undoManager.markIgnored(rev); // mark the new group as ignored</code></pre>
<p>To implement undo/redo buttons see <a target="_blank" rel="noopener noreferrer" href="https://ace.c9.io/demo/toolbar.html">https://ace.c9.io/demo/toolbar.html</a></p>
<h3>Searching</h3>
<pre><code class="language-javascript">editor.find('needle',{
backwards: false,
wrap: false,
caseSensitive: false,
wholeWord: false,
regExp: false
});
editor.findNext();
editor.findPrevious();</code></pre>
<p>The following options are available to you for your search parameters:</p>
<ul>
<li>
<code>needle</code>: The string or regular expression you're looking for
</li>
<li>
<code>backwards</code>: Whether to search backwards from where cursor currently is. Defaults to <code>false</code>.
</li>
<li>
<code>wrap</code>: Whether to wrap the search back to the beginning when it hits the end. Defaults to <code>false</code>.
</li>
<li>
<code>caseSensitive</code>: Whether the search ought to be case-sensitive. Defaults to <code>false</code>.
</li>
<li>
<code>wholeWord</code>: Whether the search matches only on whole words. Defaults to <code>false</code>.
</li>
<li>
<code>range</code>: The <a class="internal absent" href="/ajaxorg/ace/wiki/Range">Range</a> to search within. Set this to <code>null</code> for the whole document
</li>
<li>
<code>regExp</code>: Whether the search is a regular expression or not. Defaults to <code>false</code>.
</li>
<li>
<code>start</code>: The starting <a class="internal absent" href="/ajaxorg/ace/wiki/Range">Range</a> or cursor position to begin the search
</li>
<li>
<code>skipCurrent</code>: Whether or not to include the current line in the search. Default to <code>false</code>.
</li>
<li>
<code>preventScroll</code>: Whether or not to move the cursor to the next match. Default to <code>false</code>.
</li>
</ul>
<p>Here's how you can perform a replace:</p>
<pre><code class="javascript">editor.find('foo');
editor.replace('bar');</code></pre>
<p>And here's a replace all: </p>
<pre><code class="javascript">editor.replaceAll('bar');</code></pre>
<p>(<code>editor.replaceAll</code> uses the needle set earlier by <code>editor.find('needle', ...</code>)</p>
<h3>Listening to Events</h3>
<p>To listen for an <code>onchange</code>:</p>
<pre><code class="javascript">editor.session.on('change', function(delta) {
// delta.start, delta.end, delta.lines, delta.action
});</code></pre>
<p>To listen for an <code>selection</code> change:</p>
<pre><code class="javascript">editor.session.selection.on('changeSelection', function(e) {
});</code></pre>
<p>To listen for a <code>cursor</code> change:</p>
<pre><code class="javascript">editor.session.selection.on('changeCursor', function(e) {
});</code></pre>
<h3>Adding New Commands and Keybindings</h3>
<p>To assign key bindings to a custom function:</p>
<pre><code class="javascript">editor.commands.addCommand({
name: 'myCommand',
bindKey: {win: 'Ctrl-M', mac: 'Command-M'},
exec: function(editor) {
//...
},
readOnly: true, // false if this command should not apply in readOnly mode
// multiSelectAction: "forEach", optional way to control behavior with multiple cursors
// scrollIntoView: "cursor", control how cursor is scolled into view after the command
});</code></pre>
<h3>Configure dynamic loading of modes and themes</h3>
<p>By default ace detcts the url for dynamic loading by finding the script node for ace.js.
This doesn't work if ace.js is not loaded with a separate script tag, and in this case it is required to set url explicitely</p>
<pre><code class="javascript">ace.config.set("basePath", "https://url.to.a/folder/that/contains-ace-modes");</code></pre>
<p>Path for one module alone can be configured with:</p>
<pre><code class="javascript">ace.config.setModuleUrl("ace/theme/textmate", "url for textmate.js");</code></pre>
<p>When using ace with webpack, it is possible to configure paths for all submodules using</p>
<pre><code class="javascript">require("ace-builds/esm-resolver"); // for new bundlers: webpack 5, rollup, vite</code></pre>
For webpack 4 use
<pre><code class="javascript">require("ace-builds/webpack-resolver"); </code></pre>
<p>which depends on <a href="https://github.com/webpack-contrib/file-loader">file-loader</a></p>
</div>
<div class="tab-pane fade" id="higlighter">
<h1>Creating a Syntax Highlighter for Ace</h1>
<p>Creating a new syntax highlighter for Ace is extremely simple. You'll need to define two pieces of code: a new mode, and a new set of highlighting rules.</p>
<h2 id="where-to-start"><a class="heading_anchor" href="#where-to-start"><i class="headerLinkIcon"></i></a>Where to Start</h2>
<p>We recommend using the <a href="tool/mode_creator.html">Ace Mode Creator</a> when defining your highlighter. This allows you to inspect your code's tokens, as well as providing a live preview of the syntax highlighter in action.</p>
<h2 id="defining-a-mode"><a class="heading_anchor" href="#defining-a-mode"><i class="headerLinkIcon"></i></a>Defining a Mode</h2>
<p>Every language needs a mode. A mode contains the paths to a language's syntax highlighting rules, indentation rules, and code folding rules. Without defining a mode, Ace won't know anything about the finer aspects of your language.</p>
<p>Here is the starter template we'll use to create a new mode:</p>
<pre><code class="language-javascript">define(function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
// defines the parent mode
var TextMode = require("./text").Mode;
var Tokenizer = require("../tokenizer").Tokenizer;
var MatchingBraceOutdent = require("./matching_brace_outdent").MatchingBraceOutdent;
// defines the language specific highlighters and folding rules
var MyNewHighlightRules = require("./mynew_highlight_rules").MyNewHighlightRules;
var MyNewFoldMode = require("./folding/mynew").MyNewFoldMode;
var Mode = function() {
// set everything up
this.HighlightRules = MyNewHighlightRules;
this.$outdent = new MatchingBraceOutdent();
this.foldingRules = new MyNewFoldMode();
};
oop.inherits(Mode, TextMode);
(function() {
// configure comment start/end characters
this.lineCommentStart = "//";
this.blockComment = {start: "/*", end: "*/"};
// special logic for indent/outdent.
// By default ace keeps indentation of previous line
this.getNextLineIndent = function(state, line, tab) {
var indent = this.$getIndent(line);
return indent;
};
this.checkOutdent = function(state, line, input) {
return this.$outdent.checkOutdent(line, input);
};
this.autoOutdent = function(state, doc, row) {
this.$outdent.autoOutdent(doc, row);
};
// create worker for live syntax checking
this.createWorker = function(session) {
var worker = new WorkerClient(["ace"], "ace/mode/mynew_worker", "NewWorker");
worker.attachToDocument(session.getDocument());
worker.on("errors", function(e) {
session.setAnnotations(e.data);
});
return worker;
};
}).call(Mode.prototype);
exports.Mode = Mode;
});</code></pre>
<p>What's going on here? First, you're defining the path to <code>TextMode</code> (more on this later). Then you're pointing the mode to your definitions for the highlighting rules, as well as your rules for code folding. Finally, you're setting everything up to find those rules, and exporting the Mode so that it can be consumed. That's it!</p>
<p>Regarding <code>TextMode</code>, you'll notice that it's only being used once: <code>oop.inherits(Mode, TextMode);</code>. If your new language depends on the rules of another language, you can choose to inherit the same rules, while expanding on it with your language's own requirements. For example, PHP inherits from HTML, since it can be embedded directly inside <em>.html</em> pages. You can either inherit from <code>TextMode</code>, or any other existing mode, if it already relates to your language.</p>
<p>All Ace modes can be found in the <em>lib/ace/mode</em> folder.</p>
<h2 id="defining-syntax-highlighting-rules"><a class="heading_anchor" href="#defining-syntax-highlighting-rules"><i class="headerLinkIcon"></i></a>Defining Syntax Highlighting Rules</h2>
<p>The Ace highlighter can be considered to be a state machine. Regular expressions define the tokens for the current state, as well as the transitions into another state. Let's define <em>mynew_highlight_rules.js</em>, which our mode above uses.</p>
<p>All syntax highlighters start off looking something like this:</p>
<pre><code class="language-javascript">define(function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
var MyNewHighlightRules = function() {
// regexp must not have capturing parentheses. Use (?:) instead.
// regexps are ordered -> the first match is used
this.$rules = {
"start" : [
{
token: token, // String, Array, or Function: the CSS token to apply
regex: regex, // String or RegExp: the regexp to match
next: next // [Optional] String: next state to enter
}
]
};
};
oop.inherits(MyNewHighlightRules, TextHighlightRules);
exports.MyNewHighlightRules = MyNewHighlightRules;
});</code></pre>
<p>The token state machine operates on whatever is defined in <code>this.$rules</code>. The highlighter always begins at the <code>start</code> state, and progresses down the list, looking for a matching <code>regex</code>. When one is found, the resulting text is wrapped within a <code><span class="ace_<token>"></code> tag, where <code><token></code> is defined as the <code>token</code> property. Note that all tokens are preceded by the <code>ace_</code> prefix when they're rendered on the page.</p>
<p>Once again, we're inheriting from <code>TextHighlightRules</code> here. We could choose to make this any other language set we want, if our new language requires previously defined syntaxes. For more information on extending languages, see "<a href="#extending-highlighters">extending Highlighters</a>" below.</p>
<h3 id="defining-tokens"><a class="heading_anchor" href="#defining-tokens"><i class="headerLinkIcon"></i></a>Defining Tokens</h3>
<p>The Ace highlighting system is heavily inspired by the <a href="http://manual.macromates.com/en/language_grammars">TextMate language grammar</a>. Most tokens will follow the conventions of TextMate when naming grammars. A thorough (albeit incomplete) list of tokens can be found <a href="https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode#wiki-commonTokens">on the Ace Wiki</a>.</p>
<p>For the complete list of tokens, see <em><a href="https://github.com/ajaxorg/ace/blob/master/tool/tmtheme.js">tool/tmtheme.js</a></em>. It is possible to add new token names, but the scope of that knowledge is outside of this document.</p>
<p>Multiple tokens can be applied to the same text by adding dots in the token, <em>e.g.</em> <code>token: support.function</code> wraps the text in a <code><span class="ace_support ace_function"></code> tag.</p>
<h3 id="defining-regular-expressions"><a class="heading_anchor" href="#defining-regular-expressions"><i class="headerLinkIcon"></i></a>Defining Regular Expressions</h3>
<p>Regular expressions can either be a RegExp or String definition</p>
<p>If you're using a regular expression, remember to start and end the line with the <code>/</code> character, like this:</p>
<pre><code class="language-javascript">{
token : "constant.language.escape",
regex : /\$[\w\d]+/
}</code></pre>
<p>A caveat of using stringed regular expressions is that any <code>\</code> character must be escaped. That means that even an innocuous regular expression like this:</p>
<pre><code class="language-javascript">regex: "function\s*\(\w+\)"</code></pre>
<p>Must actually be written like this:</p>
<pre><code class="language-javascript">regex: "function\\s*\(\\w+\)"</code></pre>
<h4 id="groupings"><a class="heading_anchor" href="#groupings"><i class="headerLinkIcon"></i></a>Groupings</h4>
<p>You can also include flat regexps--<code>(var)</code>--or have matching groups--<code>((a+)(b+))</code>. There is a strict requirement whereby matching groups <strong>must</strong> cover the entire matched string; thus, <code>(hel)lo</code> is invalid. If you want to create a non-matching group, simply start the group with the <code>?:</code> predicate; thus, <code>(hel)(?:lo)</code> is okay. You can, of course, create longer non-matching groups. For example:</p>
<pre><code class="language-javascript">{
token : "constant.language.boolean",
regex : /(?:true|false)\b/
},</code></pre>
<p>For flat regular expression matches, <code>token</code> can be a String, or a Function that takes a single argument (the match) and returns a string token. For example, using a function might look like this:</p>
<pre><code class="language-javascript">var colors = lang.arrayToMap(
("aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|" +
"purple|red|silver|teal|white|yellow").split("|")
);
var fonts = lang.arrayToMap(
("arial|century|comic|courier|garamond|georgia|helvetica|impact|lucida|" +
"symbol|system|tahoma|times|trebuchet|utopia|verdana|webdings|sans-serif|" +
"serif|monospace").split("|")
);
...
{
token: function(value) {
if (colors.hasOwnProperty(value.toLowerCase())) {
return "support.constant.color";
}
else if (fonts.hasOwnProperty(value.toLowerCase())) {
return "support.constant.fonts";
}
else {
return "text";
}
},
regex: "\\-?[a-zA-Z_][a-zA-Z0-9_\\-]*"
}</code></pre>
<p>If <code>token</code> is a function,it should take the same number of arguments as there are groups, and return an array of tokens.</p>
<p>For grouped regular expressions, <code>token</code> can be a String, in which case all matched groups are given that same token, like this:</p>
<pre><code class="language-javascript">{
token: "identifier",
regex: "(\\w+\\s*:)(\\w*)"
}</code></pre>
<p>More commonly, though, <code>token</code> is an Array (of the same length as the number of groups), whereby matches are given the token of the same alignment as in the match. For a complicated regular expression, like defining a function, that might look something like this:</p>
<pre><code class="language-javascript">{
token : ["storage.type", "text", "entity.name.function"],
regex : "(function)(\\s+)([a-zA-Z_][a-zA-Z0-9_]*\\b)"
}</code></pre>
<h2 id="defining-states"><a class="heading_anchor" href="#defining-states"><i class="headerLinkIcon"></i></a>Defining States</h2>
<p>The syntax highlighting state machine stays in the <code>start</code> state, until you define a <code>next</code> state for it to advance to. At that point, the tokenizer stays in that new <code>state</code>, until it advances to another state. Afterwards, you should return to the original <code>start</code> state.</p>
<p>Here's an example:</p>
<pre><code class="language-javascript">this.$rules = {
"start" : [ {
token : "text",
regex : "<\\!\\[CDATA\\[",
next : "cdata"
} ],
"cdata" : [ {
token : "text",
regex : "\\]\\]>",
next : "start"
}, {
defaultToken : "text"
} ]
};</code></pre>
<p>In this extremely short sample, we're defining some highlighting rules for when Ace detects a <code><![CDATA</code> tag. When one is encountered, the tokenizer moves from <code>start</code> into the <code>cdata</code> state. It remains there, applying the <code>text</code> token to any string it encounters. Finally, when it hits a closing <code>]></code> symbol, it returns to the <code>start</code> state and continues to tokenize anything else.</p>
<h2>Using the TMLanguage Tool</h2>
<p>There is a tool that
will take an existing <em>tmlanguage</em> file and do its best to convert it into Javascript for Ace to consume. Here's what you need to get started:
</p>
<ol>
<li>In the Ace repository, navigate to the <em><a href="https://github.com/ajaxorg/ace/tree/master/tool">tools</a></em> folder.</li>
<li>Run <code>npm install</code> to install required dependencies.</li>
<li>Run <code>node tmlanguage.js <path_to_tmlanguage_file></code>; for example, <code>node <path_to_tmlanguage_file> /Users/Elrond/elven.tmLanguage</code></li>
</ol>
<p>Two files are created and placed in <em>lib/ace/mode</em>: one for the language mode, and one for the set of highlight rules. You will still need to add the code into <em>ace/ext/modelist.js</em>, and add a sample file for testing.</p>
<h3 id="a-note-on-accuracy"><a class="heading_anchor" href="#a-note-on-accuracy"><i class="headerLinkIcon"></i></a>A Note on Accuracy</h3>
<p>Your <em>.tmlanguage</em> file will then be converted to the best of the converter’s ability. It is an understatement to say that the tool is imperfect. Probably, language mode creation will never be able to be fully autogenerated. There's a list of non-determinable items; for example:</p>
<ul>
<li>The use of regular expression lookbehinds<br />This is a concept that JavaScript simply does not have and needs to be faked</li>
<li>Deciding which state to transition to<br />While the tool does create new states correctly, it labels them with generic terms like <code>state_2</code>, <code>state_10</code>, <em>e.t.c.</em></li>
<li>Extending modes<br />Many modes say something like <code>include source.c</code>, to mean, “add all the rules in C highlighting.” That syntax does not make sense to Ace or this tool (though of course you can <a href="/extension-development-resources/guides/extending_highlighters.html">extending existing highlighters</a>).</li>
<li>Rule preference order</li>
<li>Gathering keywords<br />Most likely, you’ll need to take keywords from your language file and run them through <code>createKeywordMapper()</code></li>
</ul>
<p>However, the tool is an excellent way to get a quick start, if you already possess a <em>tmlanguage</em> file for you language.</p>
<h2>Extending Highlighters</h2>
<p>Suppose you're working on a LuaPage, PHP embedded in HTML, or a Django template. You'll need to create a syntax highlighter that takes all the rules from the original language (Lua, PHP, or Python) and extends it with some additional identifiers (<code><?lua</code>, <code><?php</code>, <code>{%</code>, for example). Ace allows you to easily extend a highlighter using a few helper functions.</p>
<h3 id="getting-existing-rules"><a class="heading_anchor" href="#getting-existing-rules"><i class="headerLinkIcon"></i></a>Getting Existing Rules</h3>
<p>To get the existing syntax highlighting rules for a particular language, use the <code>getRules()</code> function. For example:</p>
<pre><code class="language-javascript">var HtmlHighlightRules = require("./html_highlight_rules").HtmlHighlightRules;
this.$rules = new HtmlHighlightRules().getRules();
/*
this.$rules == Same this.$rules as HTML highlighting
*/</code></pre>
<h3 id="extending-a-highlighter"><a class="heading_anchor" href="#extending-a-highlighter"><i class="headerLinkIcon"></i></a>Extending a Highlighter</h3>
<p>The <code>addRules</code> method does one thing, and it does one thing well: it adds new rules to an existing rule set, and prefixes any state with a given tag. For example, let's say you've got two sets of rules, defined like this:</p>
<pre><code class="language-javascript">this.$rules = {
"start": [ /* ... */ ]
};
var newRules = {
"start": [ /* ... */ ]
}</code></pre>
<p>If you want to incorporate <code>newRules</code> into <code>this.$rules</code>, you'd do something like this:</p>
<pre><code class="language-javascript">this.addRules(newRules, "new-");
/*
this.$rules = {
"start": [ ... ],
"new-start": [ ... ]
};
*/</code></pre>
<h3 id="extending-two-highlighters"><a class="heading_anchor" href="#extending-two-highlighters"><i class="headerLinkIcon"></i></a>Extending Two Highlighters</h3>
<p>The last function available to you combines both of these concepts, and it's called <code>embedRules</code>. It takes three parameters:</p>
<ol>
<li>An existing rule set to embed with</li>
<li>A prefix to apply for each state in the existing rule set</li>
<li>A set of new states to add</li>
</ol>
<p>Like <code>addRules</code>, <code>embedRules</code> adds on to the existing <code>this.$rules</code> object. </p>
<p>To explain this visually, let's take a look at the syntax highlighter for Lua pages, which combines all of these concepts:</p>
<pre><code class="language-javascript">var HtmlHighlightRules = require("./html_highlight_rules").HtmlHighlightRules;
var LuaHighlightRules = require("./lua_highlight_rules").LuaHighlightRules;
var LuaPageHighlightRules = function() {
this.$rules = new HtmlHighlightRules().getRules();
for (var i in this.$rules) {
this.$rules[i].unshift({
token: "keyword",
regex: "<\\%\\=?",
next: "lua-start"
}, {
token: "keyword",
regex: "<\\?lua\\=?",
next: "lua-start"
});
}
this.embedRules(LuaHighlightRules, "lua-", [
{
token: "keyword",
regex: "\\%>",
next: "start"
},
{
token: "keyword",
regex: "\\?>",
next: "start"
}
]);
};</code></pre>
<p>Here, <code>this.$rules</code> starts off as a set of HTML highlighting rules. To this set, we add two new checks for <code><%=</code> and <code><?lua=</code>. We also delegate that if one of these rules are matched, we should move onto the <code>lua-start</code> state. Next, <code>embedRules</code> takes the already existing set of <code>LuaHighlightRules</code> and applies the <code>lua-</code> prefix to each state there. Finally, it adds two new checks for <code>%></code> and <code>?></code>, allowing the state machine to return to <code>start</code>.</p>
<h3>Code Folding</h3>
<p>Adding new folding rules to your mode can be a little tricky. First, insert the following lines of code into your mode definition:</p>
<pre><code class="language-javascript">var MyFoldMode = require("./folding/newrules").FoldMode;
...
var MyMode = function() {
...
this.foldingRules = new MyFoldMode();
};</code></pre>
<p>You'll be defining your code folding rules into the <em>lib/ace/mode/folding</em> folder. Here's a template that you can use to get started:</p>
<pre><code class="language-javascript">define(function(require, exports, module) {
"use strict";
var oop = require("../../lib/oop");
var Range = require("../../range").Range;
var BaseFoldMode = require("./fold_mode").FoldMode;
var FoldMode = exports.FoldMode = function() {};
oop.inherits(FoldMode, BaseFoldMode);
(function() {
// regular expressions that identify starting and stopping points
this.foldingStartMarker;
this.foldingStopMarker;
this.getFoldWidgetRange = function(session, foldStyle, row) {
var line = session.getLine(row);
// test each line, and return a range of segments to collapse
};
}).call(FoldMode.prototype);
});</code></pre>
<p>Just like with <code>TextMode</code> for syntax highlighting, <code>BaseFoldMode</code> contains the starting point for code folding logic. <code>foldingStartMarker</code> defines your opening folding point, while <code>foldingStopMarker</code> defines the stopping point. For example, for a C-style folding system, these values might look like this:</p>
<pre><code class="language-javascript">this.foldingStartMarker = /(\{|\[)[^\}\]]*$|^\s*(\/\*)/;
this.foldingStopMarker = /^[^\[\{]*(\}|\])|^[\s\*]*(\*\/)/;</code></pre>
<p>These regular expressions identify various symbols--<code>{</code>, <code>[</code>, <code>//</code>--to pay attention to. <code>getFoldWidgetRange</code> matches on these regular expressions, and when found, returns the range of relevant folding points. For more information on the <code>Range</code> object, see <a href="#nav=api&api=range">the Ace API documentation</a>.</p>
<p>Again, for a C-style folding mechanism, a range to return for the starting fold might look like this:</p>
<pre><code class="language-javascript">var line = session.getLine(row);
var match = line.match(this.foldingStartMarker);
if (match) {
var i = match.index;
if (match[1])
return this.openingBracketBlock(session, match[1], row, i);
var range = session.getCommentFoldRange(row, i + match[0].length);
range.end.column -= 2;
return range;
}</code></pre>
<p>Let's say we stumble across the code block <code>hello_world() {</code>. Our range object here becomes:</p>
<pre><code class="language-json">{
startRow: 0,
endRow: 0,
startColumn: 0,
endColumn: 13
}</code></pre>
<h2>Testing Your Highlighter</h2>
<p>The best way to test your tokenizer is to see it live, right? To do that, you'll want to modify the <a href="build/kitchen-sink.html">live Ace demo</a> to preview your changes. You can find this file in the root Ace directory with the name <em>kitchen-sink.html</em>.</p>
<ol>
<li>
add an entry to <code>supportedModes</code> in <a href="https://github.com/ajaxorg/ace/blob/master/lib/ace/ext/modelist.js#L53"><code>ace/ext/modelist.js</code></a>
</li>
<li>
<p>add a sample file to <code>demo/kitchen-sink/docs/</code> with same name as the mode file
</li>
</ol>
<p>Once you set this up, you should be able to witness a live demonstration of your new highlighter.</p>
<h3 id="adding-automated-tests"><a class="heading_anchor" href="#adding-automated-tests"><i class="headerLinkIcon"></i></a>Adding Automated Tests</h3>
<p>Adding automated tests for a highlighter is trivial so you are not required to do it, but it can help during development.</p>
<p>In <code>lib/ace/mode/_test</code> create a file named <code><pre>text_<span style="color:#AA0D91"><modeName></span>.txt</pre></code> with some example code. (You can skip this if the document you have added in <code>demo/docs</code> both looks good and covers various edge cases in your language syntax).
</p>
<p> Run <code><span style="color:#AA0D91">node</span> <span style="color:#008800">highlight_rules_test.js</span> <span style="color:#000088">-gen</span></code> to preserve current output of your tokenizer in <code>tokens_<span style="color:#AA0D91"><modeName></span>.json</code>
</p>
<p>After this running <code><span style="color:#008800">highlight_rules_test.js</span> <span style="color:#000088">optionalLanguageName</span></code> will compare output of your tokenizer with the correct output you've created.
</p>
<p>Any files ending with the <em>_test.js</em> suffix are automatically run by Ace's <a href="https://travis-ci.org/#!/ajaxorg/ace">Travis CI</a> server.</p>
</div>
<div class="tab-pane fade" id="api">
<div class="row centerpiece">
<div id="sidebarContainer" class="span2">
<div id="sidebar">
<div id="well">
<ul class="menu">
<li>
<div class="menu-item"><a href="./api/ace.html" class="menuLink namespace">Ace</a></div>
</li>
<li>
<div class="menu-item"><a href="./api/anchor.html" class="menuLink namespace">Anchor</a></div>
</li>
<li>
<div class="menu-item"><a href="./api/background_tokenizer.html" class="menuLink namespace">BackgroundTokenizer </a></div>
</li>
<li>
<div class="menu-item"><a href="./api/document.html" class="menuLink namespace">Document </a></div>
</li>
<li>
<div class="menu-item"><a href="./api/edit_session.html" class="menuLink namespace">EditSession</a></div>
</li>
<li>
<div class="menu-item"><a href="./api/editor.html" class="menuLink namespace">Editor</a></div>
</li>
<li>
<div class="menu-item"><a href="./api/range.html" class="menuLink namespace">Range</a></div>
</li>
<li>
<div class="menu-item"><a href="./api/scrollbar.html" class="menuLink namespace">Scrollbar</a></div>
</li>
<li>
<div class="menu-item"><a href="./api/search.html" class="menuLink namespace">Search </a></div>
</li>
<li>
<div class="menu-item"><a href="./api/selection.html" class="menuLink namespace">Selection </a></div>
</li>
<li>
<div class="menu-item"><a href="./api/token_iterator.html" class="menuLink namespace">TokenIterator</a></div>
</li>
<li>
<div class="menu-item"><a href="./api/tokenizer.html" class="menuLink namespace">Tokenizer</a></div>
</li>
<li>
<div class="menu-item"><a href="./api/undomanager.html" class="menuLink namespace">UndoManager</a></div>
</li>
<li>
<div class="menu-item"><a href="./api/virtual_renderer.html" class="menuLink namespace">VirtualRenderer</a></div>
</li>
</ul>
</div>
</div>
</div>
<div id="apiHolder">
<div id="documentation" class="span7">
<h1>Ace API Reference</h1>
<p>Welcome to the Ace API Reference!</p>
<p>On the left, you'll find a list of all of our currently documented classes.
These is not a complete set of classes, but rather, the "core" set. For more
information on how to work with Ace, check out the <a href="#nav=embedding">embedding guide</a>.
</p>
<p>Below is an ERD diagram describing some fundamentals about how the internals of Ace works:</p>
<img lazy-src="doc/template/resources/images/Ace_ERD.png" style="max-width:100%; max-height:100%" />
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="production">
<h1>Projects Using Ace</h1>
<p>Ace is used all over the web in all kinds of production applications. Here is
just a small sampling:</p>
<ul class="menu-list" style="overflow: hidden;">
<li>
<div style="height: 100%;background: url(https://a0.awsstatic.com/main/images/logos/[email protected]) no-repeat 0 7px/100px;"></div>
<a href="https://aws.amazon.com/">AWS</a>
</li>
<li>
<img lazy-src="doc/site/images/khan-logo.png"
style="left: -10px; top: -27px; width: 120px" />
<a href="http://ejohn.org/blog/introducing-khan-cs/">Khan Academy</a>
</li>
<li>
<img lazy-src="doc/site/images/cloud9-logo.png"
style="left: -11px;top:-12px; width:122px" />
<a href="https://github.com/ajaxorg/cloud9">Cloud9 IDE</a>
</li>
<li>
<img lazy-src="doc/site/images/codecademy-logo.png"
style="left: -5px; top: 10px;" />
<a href="http://www.codecademy.com/">Codecademy</a>
</li>
<li>
<img lazy-src="doc/site/images/rstudio_logo_64.png"
style="left: 19px; top: 2px;" />
<a href="http://rstudio.org/">RStudio</a>
</li>
<li>
<img lazy-src="https://zedapp.s3.amazonaws.com/uploads/2014/02/zed-small.png" style="left: -1px;top: -20px;width: 103px;">
<a href="http://zedapp.org">Zed</a>
</li>
<li>
<img lazy-src="https://raw.githubusercontent.com/creationix/tedit/gh-pages/icons/icon-128.png"
style="width: 104px; left: -1px; top: -17px;">
<a href="https://github.com/creationix/tedit">Tedit</a>
</li>
<li>
<img lazy-src="https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" style="left: -5px; top: -35px; width: 110px;">
<a href="https://en.wikipedia.org/wiki/Special:Version" style="font-family: 'Linux Libertine','Hoefler Text',Georgia,'Times New Roman',Times,serif;">W<span style="font-variant: small-caps;">ikipedi</span>A</a>
</li>
<li>
<img lazy-src="doc/site/images/codiad.png"
style="left: 10px; top: -4px; width:80px" />
<a href="http://codiad.com/">Codiad</a>
</li>
<li>
<img lazy-src="doc/site/images/shiftedit-logo.png"
style="left: -10px; top: -20px; width: 120px" />
<a href="http://shiftedit.net/">ShiftEdit</a>
</li>
<li>
<img lazy-src="doc/site/images/sassmeister-logo.png"
style="left: 10px;top: -5px;width: 80px;" />
<a href="http://sassmeister.com/">SassMeister</a>
</li>
<li>
<img lazy-src="doc/site/images/sx-logo.png"
style="left: -11px; top: -12px;">
<a href="http://www.scroipe.com">Scroipe</a>
</li>
<li>
<img lazy-src="doc/site/images/ideone-logo.png"
style="left: -5px; top: 20px;">
<a href="http://ideone.com">Ideone.com</a>
</li>
<li>
<div style="
background: url(https://lively-web.org/core/media/lively-web-logo.png) no-repeat;
position: absolute; left: -5px; height: 71px; width: 103px; background-size: 390px;
background-position: 19px;"></div>
<a href="http://lively-web.org">Lively Web</a>
</li>
<li>
<img lazy-src="doc/site/images/modx-logo-4.png"
style="left: 18px; top: 6px;">
<a href="http://modx.com/extras/package/ace">MODX</a>
</li>
<li>
<div class="rotating-logo" style="background:url(doc/site/images/habitat-logo.svg) center no-repeat;
left: 19px; top: 6px;width: 60px;height: 60px;background-size: 60px;position: relative;"></div>
<a href="http://habitat.inkling.com">Inkling Habitat</a>
</li>
<li style="width: 248px;">
<img lazy-src="https://codecombat.com/images/pages/base/logo.png" style="left: 0px; top: 1px; width: 248px">
<a href="http://codecombat.com">Code Combat</a>
</li>
<li>
<img lazy-src="https://papeeria.com/assets/all/images/papeeria_small.png" style="width: 95px; left: 2px; top: 8px;">
<a href="http://papeeria.com">Papeeria</a>
</li>
<li>
<img lazy-src="https://www.codingame.com/blog/wp-content/uploads/2016/11/logo_codingame_hud.png"
style="left: -15px;top: 27px;width: 127px;background: black;" />
<a href="https://www.codingame.com">CodinGame</a>
</li>
<li>
<div class="text-logo">Dillinger</div>
<a href="http://dillinger.io/">Dillinger</a>
</li>
<li>
<div class="text-logo" style="margin-left: -14px;">CodeHelper</div>
<a href="http://www.gamedevhelper.com/">CodeHelper</a>
</li>
<li>
<div class="text-logo">Edicy</div>
<a href="http://www.edicy.com/blog/new-code-editor-for-creating-unique-website-designs">Edicy</a>
</li>
<li>
<div class="text-logo">pixelJET</div>
<a href="http://www.pixeljet.net/index.html">pixelJET</a>
</li>
<li>
<img lazy-src="https://approximatrix.com/static/images/simplytext/logo-long-white.png"
style="width: 106px; left: -4px; top: 26px;">
<a href="http://approximatrix.com/products/simplytext">Simply Text</a>
</li>
<li>
<div class="text-logo" style="font-size: 18px;">ACEView</div>
<a href="https://github.com/faceleg/ACEView">ACEView</a>
</li>
<li>
<div class="text-logo" style="margin-left:-12px;">BootTheme</div>
<a href="http://www.boottheme.com/">BootTheme</a>
</li>
<li>
<img lazy-src="https://codebender.cc/images/codebender-transparent.png"
style="left: -9px; width: 117px;top: -22px;">
<a href="http://codebender.cc/">Codebender</a>
</li>
<li>
<div class="text-logo" style="margin-left:-5px;">Debuggex</div>
<a href="http://www.debuggex.com">Debuggex</a>
</li>
<li>
<script>
ace.require("ace/lib/dom").importCssStylsheet("https://fonts.googleapis.com/css?family=Henny+Penny", document);
</script>
<div class="text-logo" style="margin-left:-17px;font-family:'Henny Penny',cursive;">ChocolateJs</div>
<a href="https://chocolatejs.org">Chocolatejs</a>
</li>
<li>
<img lazy-src="https://playir.com/common/icon_playir.png"
style="left: 11px; width: 96px;top: -17px;">
<a href="http://playir.com">Playir</a>
</li>
<li>
<img lazy-src="https://joshnuss.github.io/mruby-web-irb/images/favicon.png"
style="left: 4px; width: 90px;top: -17px;">
<a href="http://joshnuss.github.io/mruby-web-irb/">Mruby-web-irb</a>
</li>
<li>
<div style="font-size:50px" class="text-logo">t<span style="color:green">p<span></div>
<a href="https://www.tutorialspoint.com/online_html_editor.php">tutorialspoint</a>
</li>
<li title="Online conference and code review tool">
<div style="width: 90px; left: 10px; top: 0px;background:rgb(24,73,92);color: white;position: absolute;
font-size: 68px;text-align: center;font-weight: bold;font-family: inherit;line-height: normal;">sT</div>
<a href="http://sourcetalk.net/">SourceTalk</a>
</li>
<li>
<div class="text-logo" style="margin-top:4px">Run PHP Code</div>
<a href="https://github.com/websiteduck/Run-PHP-Code">RunPHPCode</a>
</li>
<li>
<img lazy-src="https://cloudcmd.io/img/logo/cloudcmd.png"
style="width: 108px; left: -4px; top: -2px;">
<a href="http://cloudcmd.io">Cloud Commander</a>
</li>
<li>
<div class="text-logo">NapCat</div>
<a href="http://napcatapp.tumblr.com/post/60598006734/version-1-3-is-released">NapCat</a>
</li>
<li>
<div style="color:orange;font-size:50px" class="text-logo">OJ</div>
<a href="http://ojjs.org/index.html">OJjs</a>
</li>
<li>
<div style="color:green;font-size:50px" class="text-logo"></></div>
<a href="https://thlorenz.github.io/scriptie-talkie/">Scriptie-Talkie</a>
</li>
<li>
<div class="text-logo">md</div>
<a href="https://thlorenz.github.io/browserify-markdown-editor/">browserify-markdown-editor</a>
</li>
<li>
<!-- <img src="https://www.siteleaf.com/images/logo.svg" style="left: 20px; top: -15px; width: 60px;"> -->
<a href="https://www.siteleaf.com/">Siteleaf</a>
</li>
<li>
<div class="" style="
background: url(https://colorsublime.github.io/assets/img/ColorSublime_logo.png);
position: absolute;height: 65px;width: 99px;
background-size: 310px 128px;background-position: 210px top;
"></div>
<a href="https://colorsublime.github.io/">ColorSublime</a>
</li>
<li>
<div style="
background: url(https://s3.amazonaws.com/spark-website/spark.png) no-repeat;
position: absolute; height: 65px; width: 83px; background-size: 200px 65px;
background-position: 19px;"></div>
<a href="http://spark.io/build">Spark Core</a>
</li>
<li>
<img lazy-src="https://2.gravatar.com/avatar/021e207e86fe81a7d81c67ef1ff38a0c" style="left: 11px; top: -5px;">