sku-pg
Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
129 lines (117 loc) • 7.89 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CodeMirror: Script Compression</title>
<link rel="stylesheet" type="text/css" href="css/docs.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.field {border: 1px solid black; padding: .4em;}
button {border: 1px solid black; background-color: #eee;}
</style>
</head>
<body>
<div class="top underline" style="text-align: center">
<h1 style="margin-bottom: 0;"><a href="index.html" style="text-decoration: none; color: black;">CodeMirror</a></h1>
<h2 style="margin-top: 0; margin-bottom: .3em;">Script Compression</h2>
</div>
<p>The CodeMirror scripts, as distributed, are many, and full of
comments. To optimize page loading, it is recommended to
concatenate the scripts loaded in the CodeMirror frame, and
compress them. This page may be useful if you intend to do this:
it provides an interface go Google's <a
href="http://closure-compiler.appspot.com/">Closure compiler</a>,
allowing you to easily load in CodeMirror scripts.</p>
<p>You will have to compress <code>codemirror.js</code>
separately, since that will be loaded into the top-level page from
which you use CodeMirror. Inside the frame, the
<code>parserfile</code> and <code>basefiles</code> options control
which files are loaded. If you combine the parser(s) you need with
the basefiles, you can set <code>basefiles</code> to point at your
compressed file, and leave <code>parserfiles</code> at
<code>[]</code>.</p>
<p>For example, you have a page that uses CodeMirror to edit some
JavaScript code. You could save a minimized version of
<code>codemirror.js</code> as <code>codemirror_min.js</code>, and
include that (with a <code><script></code> tag) in your page.
Next, you compress all the files under "In-frame base code", plus
<code>tokenizejavascript.js</code> and
<code>parsejavascript.js</code> into
<code>codemirror_base.js</code>, and load the editor like
this:</p>
<pre class="code">CodeMirror.fromTextArea("mytextarea", {
basefiles: ["js/codemirror_base.js"],
lineNumbers: true
});</pre>
<p>Clicking the "Compress" buttons below will take you to a file
containing the compressed code. Copy-paste this into your script
file. ("Save as" for that page is broken on some browsers, so be
careful).</p>
<script type="text/javascript">
function setVersion(ver) {
var urlprefix = ver.options[ver.selectedIndex].value;
console.log(urlprefix);
var select = document.getElementById("files"), m;
for (var optgr = select.firstChild; optgr; optgr = optgr.nextSibling)
for (var opt = optgr.firstChild; opt; opt = opt.nextSibling) {
if (opt.nodeName != "OPTION")
continue;
else if (m = opt.value.match(/^http:\/\/marijn.haverbeke.nl\/codemirror\/(.*)$/))
opt.value = urlprefix + m[1];
else if (m = opt.value.match(/http:\/\/marijn.haverbeke.nl\/git\/codemirror\?a=blob_plain;hb=[^;]+;f=(.*)$/))
opt.value = urlprefix + m[1];
}
}
function verify() {
document.getElementById("output").value="warnings";
document.getElementById("form").submit();
document.getElementById("output").value="compiled_code";
}
</script>
<form id="form" action="http://closure-compiler.appspot.com/compile" method="post" id="form">
<p>Version: <select id="version" onchange="setVersion(this);" class="field" style="padding: 1px">
<option value="http://marijn.haverbeke.nl/codemirror/" selected>Development head</option>
<option value="http://marijn.haverbeke.nl/git/codemirror?a=blob_plain;hb=v0.8;f=">v0.8</option>
<option value="http://marijn.haverbeke.nl/git/codemirror?a=blob_plain;hb=v0.7;f=">v0.7</option>
<option value="http://marijn.haverbeke.nl/git/codemirror?a=blob_plain;hb=v0.67;f=">v0.67</option>
<option value="http://marijn.haverbeke.nl/git/codemirror?a=blob_plain;hb=v0.66;f=">v0.66</option>
</select></p>
<p><input type="hidden" value="compiled_code" name="output_info" id="output"/>
<select multiple="multiple" name="code_url" style="width: 40em;" class="field" id="files">
<optgroup label="CodeMirror Library">
<option value="http://marijn.haverbeke.nl/codemirror/js/codemirror.js">codemirror.js</option>
</optgroup>
<optgroup label="In-frame base files">
<option value="http://marijn.haverbeke.nl/codemirror/js/util.js">util.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/js/stringstream.js">stringstream.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/js/select.js">select.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/js/undo.js">undo.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/js/editor.js">editor.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/js/tokenize.js">tokenize.js</option>
</optgroup>
<optgroup label="Parsers">
<option value="http://marijn.haverbeke.nl/codemirror/js/tokenizejavascript.js">tokenizejavascript.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/js/parsejavascript.js">parsejavascript.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/js/parsexml.js">parsexml.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/js/parsecss.js">parsecss.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/js/parsesparql.js">parsesparql.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/js/parsehtmlmixed.js">parsehtmlmixed.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/js/parsedummy.js">parsedummy.js</option>
</optgroup>
<optgroup label="Contributed parsers">
<option value="http://marijn.haverbeke.nl/codemirror/contrib/lua/js/parselua.js">parselua.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/contrib/python/js/parsepython.js">parsepython.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/contrib/php/js/tokenizephp.js">tokenizephp.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/contrib/php/js/parsephp.js">parsephp.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/contrib/php/js/parsephphtmlmixed.js">parsephphtmlmixed.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/contrib/csharp/js/tokenizecsharp.js">tokenizecsharp.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/contrib/csharp/js/parsecsharp.js">parsecsharp.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/contrib/sql/js/parsesql.js">parsesql.js</option>
<option value="http://marijn.haverbeke.nl/codemirror/contrib/plsql/js/parseplsql.js">parseplsql.js</option>
<option value="http://svn.exoplatform.org/projects/gwt/trunk/exo.gwtframework.editor/src/main/resources/org/exoplatform/gwtframework/editor/public/codemirror/js/tokenizegroovy.js">tokenizegroovy.js</option>
<option value="http://svn.exoplatform.org/projects/gwt/trunk/exo.gwtframework.editor/src/main/resources/org/exoplatform/gwtframework/editor/public/codemirror/js/parsegroovy.js">parsegroovy.js</option>
</optgroup>
</select></p>
<p><button type="submit">Compress!</button> <button type="button" onclick="verify();">Check for errors</button></p>
<p>Custom code to add to the compressed file:<textarea name="js_code" style="width: 100%; height: 15em;" class="field"></textarea></p>
</form>
</body>
</html>