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>