This repository has been archived by the owner on Jun 23, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 230
/
index.html
307 lines (289 loc) · 16.5 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
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Product">
<head>
<title>repl.it</title>
<script>
// Redirect old hash url to new.
(function () {
var loc = window.location,
parts = loc.hash.split(':'),
session_path = parts[0].slice(1),
page = parts[1];
if (page || session_path) {
var loc = loc.protocol + '//' + loc.host + '/';
if (session_path) loc += session_path + '/';
if (page) loc += page;
window.location.href = loc;
}
})();
</script>
<!-- Icons -->
<link rel="shortcut icon" href="/images/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" type="image/png" />
<!-- Scripts -->
<link type="text/css" rel="stylesheet" href="/css/style.css?{{CACHE_BUSTER}}" />
<link type="text/css" rel="stylesheet" href="/css/print.css?{{CACHE_BUSTER}}" media="print" />
<link type="text/css" rel="stylesheet" href="/css/ansi.css?{{CACHE_BUSTER}}" />
<!-- Application -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--BAKED
<script src="/jsrepl/jsrepl.js?{{CACHE_BUSTER}}" id="jsrepl-script"></script>
<script src="/repl.it.js?{{CACHE_BUSTER}}"></script>
UNBAKED-->
<!-- jsREPL -->
<script src="/jsrepl/repl.js?{{CACHE_BUSTER}}" id="jsrepl-script"></script>
<script src="/jsrepl/languages.js?{{CACHE_BUSTER}}"></script>
<!-- repl.it -->
<script src="/lib/jqconsole-2.10.0.min.js"></script>
<script src="/lib/bootstrap-tooltip.js"></script>
<script src="/lib/page.js"></script>
<script src="/src/base.js?{{CACHE_BUSTER}}"></script>
<script src="/src/browser-check.js?{{CACHE_BUSTER}}"></script>
<script src="/src/dom.js?{{CACHE_BUSTER}}"></script>
<script src="/src/repl.js?{{CACHE_BUSTER}}"></script>
<script src="/src/pager.js?{{CACHE_BUSTER}}"></script>
<script src="/src/router.js?{{CACHE_BUSTER}}"></script>
<script src="/src/session.js?{{CACHE_BUSTER}}"></script>
<script src="/src/languages.js?{{CACHE_BUSTER}}"></script>
<script src="/src/analytics.js?{{CACHE_BUSTER}}"></script>
<!--/UNBAKED-->
<script src="/lib/ace/ace.js"></script>
<!-- Session -->
<script>try{ {{SESSION_PLACEHOLDER}} } catch(e) {}</script>
<!-- Facebook -->
<meta property="og:title" content="repl.it" />
<meta property="og:description" content="Run code in a variety of languages from your browser!" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://repl.it/" />
<meta property="og:image" content="http://repl.it/images/logo-small.png" />
<meta property="og:site_name" content="repl.it" />
<meta property="fb:app_id" content="111098168994577" />
<!-- G+ -->
<meta itemprop="name" content="repl.it" />
<meta itemprop="description" content="Run code in a variety of languages from your browser!" />
<meta itemprop="image" content="http://repl.it/images/logo-small.png" />
<!-- Mobiles -->
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1">
<!-- General -->
<meta name="description" content="Online Interpreters in JavaScript. Try Python, Ruby, Scheme, Lua, CoffeeScript and more programming languages. Online coding and REPL. Run and share code.">
<meta name="keywords" content="Online,Interpreters,JavaScript,Python,Ruby,Scheme,APL,Lua,CoffeeScript,Forth,QBasic,terminal,console,share,run,code,coding,programming,esoteric,languages,web,REPL">
<meta name="author" content="Amjad Masad and Max Shawabkeh">
<meta charset="UTF-8">
</head>
<body>
<div id="header">
<a id="logo" href="/languages"><img src="/images/logo-small.png" width="173" height="60" alt="repl.it" /></a>
<div id="buttons">
<!-- Warning: inline elements, any white space would break the layout -->
<a href="/languages"><div id="button-languages" class="button left" title="Languages"></div></a><a href="/examples"><div id="button-examples" class="button middle" title="Examples"></div></a><div id="button-save" class="button middle" title="Save"></div><a href="/help"><div id="button-help" class="button right" title="Help"></div></a>
</div>
<h1 id="title">Online Interpreter</h1>
</div>
<div id="main">
<div id="resize-left"></div>
<!-- Main wokspace area with editor and console. -->
<div id="content-workspace" class="page">
<div id="editor">
<div id="editor-run" class="button"></div>
<div id="editor-widget"></div>
<div id="unhide-left"></div>
</div>
<div id="resize-center"></div>
<div id="console">
<div id="replay-button" class="button">Run Session</div>
<div id="progress"><div id="progress-fill"></div></div>
<div id="unhide-right"></div>
</div>
</div>
<!-- Language selector. -->
<!-- NOTE: tabindex needed for it to receive focus. -->
<div id="content-languages" class="page" tabindex="0">
<h2 class="content-title">Select a Language</h2>
<div id="languages-back" class="page-close"></div>
<div class="language-group">
<h3 class="language-group-header">Classic</h3>
<ul>
<li>
<a href="/languages/QBasic"><b><em>Q</em>Basic:</b>
Structured programming for beginners.</a>
</li><li>
<a href="/languages/Forth"><b>Fort<em>h</em>:</b>
An interactive stack-oriented language.</a>
</li><li>
<a href="/languages/APL"><b><em>A</em>PL:</b>
An array-oriented language using funny characters</a>
</li>
</ul>
</div>
<div class="language-group">
<h3 class="language-group-header">Practical</h3>
<ul>
<li>
<a href="/languages/Ruby"><b><em>R</em>uby (beta):</b>
A natural dynamic object-oriented language.</a>
</li><li>
<a href="/languages/Python"><b><em>P</em>ython:</b>
A dynamic language emphasizing readability.</a>
</li><li>
<a href="/languages/Lua"><b><em>L</em>ua:</b>
A lightweight multi-paradigm scripting language.</a>
</li><li>
<a href="/languages/Scheme"><b><em>S</em>cheme:</b>
An elegant dynamic dialect of Lisp.</a>
</li>
</ul>
</div>
<div class="language-group">
<h3 class="language-group-header">Esoteric</h3>
<ul>
<li>
<a href="/languages/Emoticon"><b><em>E</em>moticon:</b>
Programming with an extra dose of smile.</a>
</li><li>
<a href="/languages/Brainfuck"><b>Brain<em>F</em>***:</b>
A pure Turing machine controller.</a>
</li><li>
<a href="/languages/LOLCODE"><b>L<em>O</em>LCODE:</b>
The basic language of lolcats.</a>
</li><li>
<a href="/languages/Unlambda"><b><em>U</em>nlambda:</b>
Functional purity given form.</a>
</li><li>
<a href="/languages/Bloop"><b><em>B</em>loop:</b>
Nothing but bounded loops.</a>
</li>
</ul>
</div>
<div class="language-group">
<h3 class="language-group-header">Web</h3>
<ul>
<li>
<a href="/languages/JavaScript"><b><em>J</em>avaScript:</b>
The de facto language of the Web.</a>
</li><li>
<a href="/languages/Traceur"><b>Javascript.<em>n</em>ext:</b>
The JavaScript of tomorrow.</a>
</li><li>
<a href="/languages/Move"><b><em>M</em>ove:</b>
The easy way to program the web.</a>
</li><li>
<a href="/languages/Kaffeine"><b><em>K</em>affeine:</b>
Extended JavaScript for pros.</a>
</li><li>
<a href="/languages/CoffeeScript"><b><em>C</em>offeeScript:</b>
Unfancy JavaScript.</a>
</li><li>
<a href="/languages/Roy"><b>Ro<em>y</em>:</b>
Small functional language that compiles to JavaScript.</a>
</li>
</ul>
</div>
</div>
<!-- Examples page. -->
<div id="content-examples" class="page">
<h2 class="content-title">Example Code</h2>
<div id="examples-back" class="page-close"></div>
<div id="examples-editor"></div>
<div id="examples-separator"></div>
<div id="examples-console"></div>
</div>
<!-- Help page. -->
<div id="content-help" class="page">
<h2 class="content-title">Help</h2>
<div id="help-back" class="page-close"></div>
<div id="help-faq">
<div class="help-header">FAQ</div>
<div class="faq-question">What is repl.it?</div>
<div class="faq-answer">It is an online environment for interactively exploring programming languages. The name comes from the <a href="http://en.wikipedia.org/wiki/REPL">read-eval-print loop</a>, the interactive toplevel used by languages like Lisp and Python.</div>
<div class="faq-question">How do I start?</div>
<div class="faq-answer">Once you have selected a language, start by typing an expression into the console on the right side of the screen and pressing Enter. Your expression will be evaluated in the selected language and its result will be printed. Repeat until satisfied. You can also try some ready-to-run examples by clicking on the button labeled "eg".</div>
<div class="faq-question">Can I use variables or other state?</div>
<div class="faq-answer">Yes! The repl.it interpreters fully support variables, state and side effects in all the supported languages.</div>
<div class="faq-question">Can I save my session?</div>
<div class="faq-answer">Yes! You can save your session and share it with others by clicking on the chain link icon in the top right corner. Both the editor's content and the REPL session will be preserved and can be executed once again using the created link to continue from where you left off.</div>
<div class="faq-question">Is repl.it open source?</div>
<div class="faq-answer">Yes! You can explore the code and contribute to various parts of repl.it through <a href="https://github.com/replit">our GitHub repositories</a>.</div>
<div class="faq-question">Can I use repl.it on my phone or tablet?</div>
<div class="faq-answer">Yes! As a web application, repl.it can be used on any device that has a modern web browser. Currently, we have full support for Android devices, and partial support for iOS.</div>
<div class="faq-question">How does repl.it work?</div>
<div class="faq-answer">All code processed by repl.it runs entirely on your computer, with no server-side evaluation. It uses language interpreters written in JavaScript to execute your code and keep track of state. Some of the interpreters (like BiwaScheme) are originally implemented in JavaScript, while others (like Python) were compiled from their original lower-level implementations using <a href="http://emscripten.org/">Emscripten</a>.</div>
</div>
<div id="help-shortcuts">
<div class="help-header">Console Shortcuts</div>
<div id="help-shortcuts-content">
<div class="shortcut"><kbd>Enter</kbd></div> Evaluate the entered command.<br />
<div class="shortcut"><kbd>Shift<em>+</em>Enter</kbd></div> Continue to the next line.<br />
<div class="shortcut"><kbd>Tab</kbd></div> Indent.<br />
<div class="shortcut"><kbd>Shift<em>+</em>Tab</kbd></div> Unindent.<br />
<div class="shortcut"><kbd>Up</kbd></div> Previous history item.<br />
<div class="shortcut"><kbd>Down</kbd></div> Next history item.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>Up</kbd></div> Move to the line above the cursor.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>Down</kbd></div> Move to the line below the cursor.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>E</kbd></div> Move to the end of the current line.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>A</kbd></div> Move to the start of the current line.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>K</kbd></div> Clears the console.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>Z</kbd></div> Cancel current prompt.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>L</kbd></div> Open languages selector.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>G</kbd></div> Open examples preview.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>H</kbd></div> Open this help page.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>S</kbd></div> Save session (new revision).<br />
<div class="shortcut"><kbd>Escape</kbd></div> Close current view.<br />
</div>
</div>
</div>
<!-- About page. -->
<div id="content-about" class="page">
<h2 class="content-title">About Us</h2>
<div id="about-back" class="page-close"></div>
<p>The repl.it project is an attempt to create an online environment for interactively exploring programming languages. It provides a fully-featured terminal emulator and code editor, powered by interpreter engines for more than 15 languages.</p>
<p>All our interpreters are written in (or compiled to) JavaScript, and run completely on the user's device, regardless or whether it's a desktop, laptop or phone.</p>
<p>The repl.it code is open source and is available on <a href="https://github.com/replit">GitHub</a>.</p>
<p> </p>
<p><a href="https://twitter.com/amasad"><img src="/images/amjad.jpg" alt="Amjad Masad" /></a><a href="https://twitter.com/amasad">Amjad Masad</a> is a programmer at <a href="http://codecademy.com">Codecademy</a> and a JavaScript fanatic. He usually does frontend development, but is also known to dabble in server stuff. He drives fast cars and likes good food.</p>
<p><a href="http://max99x.com/"><img src="/images/max.jpg" alt="Max Shawabkeh" /></a><a href="http://max99x.com/">Max Shawabkeh</a> is a software engineer at Google and a Python enthusiast. He fancies himself a jack of many programming trades but a master of none. He reads fantasy books and likes good food.</p>
<p> </p>
<p>This application is a result of their sushi-powered collaboration.</p>
</div>
<div id="resize-right"></div>
</div>
<!-- Browser fallback page. -->
<div id="content-fallback">
<div id="fallback-header">Browser Version Not Supported</div>
<div id="fallback-content">
Due to repl.it's reliance on advanced JavaScript techniques, older browsers might have problems running it correctly. Please download the latest version of your favourite browser.
<br />
<a href="http://www.google.com/chrome" id="browser-chrome">Chrome 13+</a>
<a href="http://www.mozilla.org/firefox/" id="browser-firefox">Firefox 4+</a>
<a href="http://www.opera.com/download/" id="browser-opera">Opera 11.51+</a>
<br />
<a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie" id="browser-ie">IE 10+</a>
<a href="http://www.apple.com/safari/download/" id="browser-safari">Safari 5+</a>
<div id="fallback-ignore">Let me try anyway!</div>
</div>
</div>
<!-- Session save box. -->
<div id="save-box">
<div id="save-box-handle"></div>
<label for="save-box-link">Share on:</label>
<ul class="share-list">
<li class="share-social facebook"><a href="#"></a></li>
<li class="share-social twitter"><a href="#"></a></li>
<li class="share-social gplus"><a href="#"></a></li>
</ul>
<input id="save-box-link" type="text" value="" />
<label>Download:</label>
<ul class="downloads">
<li><a class="editor" href="#">Editor content</a></li>
<li><a class="repl" href="#">REPL session</a></li>
</ul>
</div>
<div id="footer">
<div id="links">
<a href="/about" id="link-about">about us</a>
<a href="https://github.com/replit" id="link-source-code" target="_blank">source code</a>
<a href="/" id="language-about-link" target="_blank"> </a>
<a href="/" id="language-engine-link" target="_blank"> </a>
</div>
</div>
</body>
</html>