1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
5
<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
8
body {color:#000;background-color:white;font:15px georgia, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; letter-spacing:0.01em;margin:15px;}
10
a,a:visited {color:#7f0055;}
11
select {background:#ffffe1;}
12
button {margin-top:5px;}
13
button.actions {width:171px;font-family:arial;}
14
h1 {color:#7f0055;margin:0;padding:0;font-size:42px;font-weight:normal;}
15
h1 a {text-decoration:none;}
17
h2 a {text-decoration:none;font-weight:normal;font-size:22px;color:black !important;}
18
h3 {font-size:20px;font-weight:normal;padding:0;margin:25px 0 5px 0;color:#7f0055;font-weight:bold;border-bottom:2px dotted #d8d8d8;}
19
h4 {font-size:18px;font-weight:normal;z-index:0;}
20
code {color:#0080c0;font-size:13px;font-weight:bold;}
21
ol, ul {padding:5px 0 5px 25px;margin:0;}
22
ol li, ul li {margin:8px 0 8px 0;}
24
#logo {text-align:center;background-color:#d6d6d6;padding:10px;-moz-border-radius:5px;border:1px solid silver;}
25
#container {width:700px;margin:20px auto;padding:25px;border:3px solid #d9d9d9;-moz-border-radius:10px;background:#f8f8f8;}
26
#languages {margin:5px 0;}
28
#menu {width:100%;background:#7f0055;-moz-border-radius:4px;}
29
#menu a {font:bold 17px georgia;color:white;padding:4px;display:block;border-left:1px solid white;text-align:center;text-decoration:none;}
30
#menu a:hover {background:#b9669e;}
32
.hidden-code {display:none;}
33
.copycode {border:1px dotted gray;padding:10px;background:white;font-family:monospace;color:gray}
42
<h1><a href="http://codepress.org/">CodePress</a></h1>
43
<h2><a href="http://codepress.org/">Online Real Time Syntax Highlighting Editor</a></h2>
48
<table cellpadding="0" cellspacing="0" id="menu">
51
<a href="http://www.codepress.org/index.php">Home/Download</a>
54
<a href="http://www.codepress.org/install.php"> Install </a>
57
<a href="http://www.codepress.org/to-do.php"> To-do </a>
60
<a href="http://www.codepress.org/about.php" id="about"> About </a>
66
CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it's being typed in the browser.
70
Go to <strong><a href="http://codepress.org/">http://codepress.org/</a></strong> for updates.
75
<em>choose example in:</em>
76
<button onclick="cp1.edit('cp-php','php')">PHP</button>
77
<button onclick="cp1.edit('cp-javascript','javascript')">JavaScript</button>
78
<button onclick="cp1.edit('cp-java','java')">Java</button>
79
<button onclick="cp1.edit('cp-perl','perl')">Perl</button>
80
<button onclick="cp1.edit('cp-sql','sql')">SQL</button>
81
<button onclick="cp1.edit('cp-html','html')">HTML</button>
82
<button onclick="cp1.edit('cp-css','css')">CSS</button>
85
<textarea id="cp1" class="codepress php" style="width:700px;height:300px;" wrap="off">
87
// Very simple implementation of server side script
89
if(isset($_GET['file'])) {
90
$file = basename($_GET['file']);
91
$full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
92
if(file_exists($full_file)) {
93
$code = file_get_contents($full_file);
94
$code = preg_replace("/>/","&gt;",$code);
95
$code = preg_replace("/</","&lt;",$code);
96
$language = getLanguage($file);
101
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
104
<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
105
<link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" />
106
<script type="text/javascript" src="codepress.js"></script>
107
<script type="text/javascript">
108
CodePress.language = '<?=$language?>';
111
<body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
117
<textarea id="codepress2" class="codepress javascript linenumbers-off" style="width:700px;height:200px;" wrap="off">
119
this.setLanguage = function() {
121
language = (typeof(Content.languages[arguments[0]])!='undefined') ? arguments[0] : this.setLanguage();
122
cpLanguage.innerHTML = Content.languages[language].name;
123
if(cpBody.document.designMode=='on') cpBody.document.designMode = 'off';
124
CodePress.loadScript(cpBody.document, '../languages/'+language+'.js', function () { cpBody.CodePress.syntaxHighlight('init'); })
125
cpBody.document.getElementById('cp-lang-style').href = '../languages/'+language+'.css';
129
var extension = filename.replace(/.*\.([^\.]+)$/,'$1');
131
for(lang in Content.languages) {
132
extensions = ','+Content.languages[lang].extensions+',';
133
if(extensions.match(','+extension+',')) aux = lang;
135
language = (aux) ? aux : 'generic';
141
<button class="actions" onclick="alert(codepress2.getCode())">get code from editor</button>
142
<button class="actions" onclick="codepress2.toggleEditor()">turn on/off CodePress</button>
143
<button class="actions" onclick="codepress2.toggleLineNumbers()">show/hide line numbers</button>
144
<button class="actions" onclick="codepress2.toggleAutoComplete()">turn on/off auto-complete</button>
145
<button class="actions" onclick="codepress2.toggleReadOnly()">turn on/off read only</button>
150
<h3>Installation</h3>
154
<a href="http://codepress.org/">Download</a> and uncompress CodePress under a directory inside your webserver.<br>
155
Example:<strong> http://yourserver/codepress/</strong><br />
156
Since CodePress is pure JavaScript and HTML, you can also test it without a webserver.
161
Insert CodePress script somewhere in your page inside the <code><head></code> or above the <code></body></code> tag.
165
<script src="/codepress/codepress.js" type="text/javascript"></script>
171
Add the <code><textarea></code> tag to the place on your page you want CodePress to appear. CodePress will inherit the width and height of your textarea.
172
When the page loads, it will automatically replace your textarea with a CodePress window.
175
<textarea id="myCpWindow" class="codepress javascript linenumbers-off"><br />
176
// your code here<br />
181
The <code>javascript</code> portion of the class="" means that the language being edited is JavaScript.
184
The <code>codepress</code> portion of the class="" is mandatory and indicates a textarea to be replaced for a CodePress window.
187
Other class options are <code>linenumbers-off</code>, <code>autocomplete-off</code> and <code>readonly-on</code>.
190
Careful not to use the same id for two different CodePress windows (<code><textarea id="<strong>xx</strong>"...></code>)
197
<h3>You also can...</h3>
200
Open/edit code from a different textarea.<br />
201
Example: <code>textarea_id.edit('other_textarea_id','language')</code><br>
204
Get code from CodePress window.<br />
205
Example: <code>textarea_id.getCode()</code><br>
208
Turn on/off CodePress editor and return to the regular textarea.<br />
209
Example: <code>textarea_id.toggleEditor()</code><br>
212
Turn on/off line numbers.<br />
213
Example: <code>textarea_id.toggleLineNumbers()</code><br>
216
Turn on/off read only.<br />
217
Example: <code>textarea_id.toggleReadOnly()</code><br>
220
Turn on/off auto-complete.<br />
221
Example: <code>textarea_id.toggleAutoComplete()</code><br>
227
You may want to use [id].getCode() to get the content code from CodePress window and save it to your server since CodePress only edit files and do not save them.
230
You may also want to open files from server. You'll have to write a server side script and replace the JavaScript call on codepress.js from codepress.html to codepress.php (if your server side language is PHP, of course).
235
CodePress is distributed under the <a href="http://www.opensource.org/licenses/lgpl-license.php">LGPL</a>. If your software is <a href="http://www.gnu.org/philosophy/license-list.html#GPLCompatibleLicenses">compatible</a> with this licence or it is under <a href="http://creativecommons.org/">Creative Commons</a>, you can use it as you want. Just keep the credits somewhere around.
239
</div><!--/container-->
243
<!-- hidden codes for loading -->
244
<textarea id="cp-php" class="hidden-code">
246
// Very simple implementation of server side script
248
if(isset($_GET['file'])) {
249
$file = basename($_GET['file']);
250
$full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
251
if(file_exists($full_file)) {
252
$code = file_get_contents($full_file);
253
$code = preg_replace("/>/","&gt;",$code);
254
$code = preg_replace("/</","&lt;",$code);
255
$language = getLanguage($file);
260
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
263
<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
264
<link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" />
265
<script type="text/javascript" src="codepress.js"></script>
266
<script type="text/javascript">
267
CodePress.language = '<?=$language?>';
270
<body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
274
<textarea id="cp-javascript" class="hidden-code">
275
CodePress = function(obj) {
276
var self = document.createElement('iframe');
278
self.textarea.disabled = true;
279
self.style.height = self.textarea.clientHeight +'px';
280
self.style.width = self.textarea.clientWidth +'px';
282
self.initialize = function() {
283
self.editor = self.contentWindow.CodePress;
284
self.editor.body = self.contentWindow.document.getElementsByTagName('body')[0];
285
self.editor.setCode(self.textarea.value);
286
self.editor.syntaxHighlight('init');
289
self.edit = function(id,language) {
290
self.language = (language) ? language : self.textarea.className.replace(/ ?codepress ?/,'');
291
self.src = cpPath+'modules/codepress.html?engine='+self.getEngine()+'&language='+self.language;
292
if(self.attachEvent) self.attachEvent('onload',self.initialize);
293
else self.addEventListener('load',self.initialize,false);
298
<textarea id="cp-autoit" class="hidden-code">
306
<textarea id="cp-java" class="hidden-code">
307
import java.io.FileFilter;
308
import java.io.IOException;
309
import java.io.PrintWriter;
312
* Project ECCO - File manager class
313
* @author Fernando M.A.d.S.
315
public class FileManager extends HttpServlet {
317
private static final long serialVersionUID = 1L;
318
private static String login = "feanndor"; // session var should come here
319
private static String usersPath = System.getProperty("user.dir")+File.separator+"htdocs"+File.separator+"ecco"+File.separator+"users"+File.separator;
320
private static File dir = new File(usersPath+login+File.separator);
321
static boolean existDirectories = false;
322
static int isDirectory = 0;
324
public FileFilter filterFiles(File dir) {
325
return (new FileFilter() {
326
public boolean accept(File pathname) {
327
return !(pathname.isDirectory());
334
<textarea id="cp-perl" class="hidden-code">
336
# The first line of the script envokes Perl
339
$var1 = "Hello World";
343
@arr1 = ("zero","one","two","three","four");
345
# Hash variable, or associative array
346
%hash1 = ("one","Monday","two", "Tuesday","three", "Wednesday","four","Thursday");
348
# Some simple printing
357
<textarea id="cp-sql" class="hidden-code">
359
-- simple select example
362
WHERE price > 100.00 and price < 150.00
365
SELECT books.title, count(*) AS Authors
368
ON books.book_number = book_authors.book_number
371
-- insert, update and delete examples
373
INSERT INTO my_table (field1, field2, field3) VALUES ('test', 'N', NULL);
376
UPDATE inventory SET quantity = quantity - 3 WHERE item = 'pants';
380
<textarea id="cp-html" class="hidden-code">
383
<title>CodePress - Online Real Time Syntax Highlighting Editor</title>
385
<style type="text/css">
386
@import url(styles.css);
388
<script type="text/javascript">
390
alert(textWithoutHighlighting);
396
<h1><a href="http://codepress.org/">CodePress</a></h1>
397
<h2>Online Real Time Syntax Highlighting Editor</h2>
398
<img src="testimage.gif" />
401
<em>choose language:</em>
402
<button onclick="edit('codepress.php',this)" id="default">PHP</button>
403
<button onclick="edit('FileManager.java',this)">Java</button>
409
<textarea id="cp-css" class="hidden-code">
414
background-color:white;
415
font:15px Georgia, "Lucida Grande", Arial, sans-serif;
416
letter-spacing:0.01em;
441
<script src="codepress.js" type="text/javascript"></script>