bazdig/codepress/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2
   3 <html>
   4 <head>
   5         <title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
   6
   7         <style>
   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;}
   9         p {margin:0 0 15px 0;}
  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;}
  16         h2 {margin:0;}
  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;}
  23
  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;}
  27
  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;}
  31
  32         .hidden-code {display:none;}
  33         .copycode {border:1px dotted gray;padding:10px;background:white;font-family:monospace;color:gray}
  34         </style>
  35
  36 </head>
  37
  38 <body>
  39 <div id="container">
  40
  41 <div id="logo">
  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>
  44 </div>
  45
  46 <br />
  47
  48 <table cellpadding="0" cellspacing="0" id="menu">
  49 <tr>
  50         <td>
  51                 <a href="http://www.codepress.org/index.php">Home/Download</a>
  52         </td>
  53         <td>
  54                 <a href="http://www.codepress.org/install.php">&nbsp;&nbsp;Install&nbsp;&nbsp;</a>
  55         </td>
  56         <td>
  57                 <a href="http://www.codepress.org/to-do.php">&nbsp;&nbsp;To-do&nbsp;&nbsp;</a>
  58         </td>
  59         <td>
  60                 <a href="http://www.codepress.org/about.php" id="about">&nbsp;&nbsp;About&nbsp;&nbsp;</a>
  61         </td>
  62 </tr>
  63 </table>
  64
  65 <h4>
  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.
  67 </h4>
  68
  69 <p>
  70         Go to <strong><a href="http://codepress.org/">http://codepress.org/</a></strong> for updates.
  71 </p>
  72
  73 <h3>Demo</h3>
  74 <div id="languages">
  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>
  83 </div>
  84
  85 <textarea id="cp1" class="codepress php" style="width:700px;height:300px;" wrap="off">
  86 <?php
  87 // Very simple implementation of server side script
  88
  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("/>/","&amp;gt;",$code);
  95                 $code = preg_replace("/</","&amp;lt;",$code);
  96                 $language = getLanguage($file);
  97         }
  98 }
  99 ?>
 100
 101 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 102 <html>
 103 <head>
 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?>';
 109         </script>
 110 </head>
 111 <body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
 112 </html>
 113 </textarea>
 114
 115 <br /><br />
 116
 117 <textarea id="codepress2" class="codepress javascript linenumbers-off" style="width:700px;height:200px;" wrap="off">
 118 //set language
 119 this.setLanguage = function() {
 120         if(arguments[0]) {
 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';
 126                 this.hideMenu();
 127         }
 128         else {
 129                 var extension = filename.replace(/.*\.([^\.]+)$/,'$1');
 130                 var aux = false;
 131                 for(lang in Content.languages) {
 132                         extensions = ','+Content.languages[lang].extensions+',';
 133                         if(extensions.match(','+extension+',')) aux = lang;
 134                 }
 135                 language = (aux) ? aux : 'generic';
 136         }
 137 }
 138 </textarea>
 139
 140 <p>
 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>
 146 </p>
 147
 148
 149
 150 <h3>Installation</h3>
 151 <ol>
 152         <li>
 153                 <p>
 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.
 157                 </p>
 158         </li>
 159         <li>
 160                 <p>
 161                         Insert CodePress script somewhere in your page inside the <code>&lt;head&gt;</code> or above the <code>&lt;/body&gt;</code> tag.
 162                 </p>
 163
 164                 <p class="copycode">
 165                         &lt;script src="/codepress/codepress.js" type="text/javascript"&gt;&lt;/script&gt;
 166                 </p>
 167         </li>
 168
 169         <li>
 170                 <p>
 171                         Add the <code>&lt;textarea&gt;</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.
 173                 </p>
 174                 <p class="copycode">
 175                         &lt;textarea id="myCpWindow" class="codepress javascript linenumbers-off"&gt;<br />
 176                         &nbsp;&nbsp;&nbsp;// your code here<br />
 177                         &lt;/textarea&gt;
 178                 </p>
 179                 <ul>
 180                         <li>
 181                                 The <code>javascript</code> portion of the class="" means that the language being edited is JavaScript.
 182                         </li>
 183                         <li>
 184                                 The <code>codepress</code> portion of the class="" is mandatory and indicates a textarea to be replaced for a CodePress window.
 185                         </li>
 186                         <li>
 187                                 Other class options are <code>linenumbers-off</code>, <code>autocomplete-off</code> and <code>readonly-on</code>.
 188                         </li>
 189                         <li>
 190                                 Careful not to use the same id for two different CodePress windows (<code>&lt;textarea id="<strong>xx</strong>"...&gt;</code>)
 191                         </li>
 192                 </ul>
 193
 194         </li>
 195 </ol>
 196
 197 <h3>You also can...</h3>
 198 <ol>
 199         <li>
 200                 Open/edit code from a different textarea.<br />
 201                 Example: <code>textarea_id.edit('other_textarea_id','language')</code><br>
 202         </li>
 203         <li>
 204                 Get code from CodePress window.<br />
 205                 Example: <code>textarea_id.getCode()</code><br>
 206         </li>
 207         <li>
 208                 Turn on/off CodePress editor and return to the regular textarea.<br />
 209                 Example: <code>textarea_id.toggleEditor()</code><br>
 210         </li>
 211         <li>
 212                 Turn on/off line numbers.<br />
 213                 Example: <code>textarea_id.toggleLineNumbers()</code><br>
 214         </li>
 215         <li>
 216                 Turn on/off read only.<br />
 217                 Example: <code>textarea_id.toggleReadOnly()</code><br>
 218         </li>
 219         <li>
 220                 Turn on/off auto-complete.<br />
 221                 Example: <code>textarea_id.toggleAutoComplete()</code><br>
 222         </li>
 223
 224 </ol>
 225
 226 <!-- p>
 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.
 228 </p>
 229 <p>
 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).
 231 </p -->
 232
 233 <h3>License</h3>
 234 <p>
 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.
 236 </p>
 237
 238
 239 </div><!--/container-->
 240
 241
 242
 243 <!-- hidden codes for loading -->
 244 <textarea id="cp-php" class="hidden-code">
 245 <?php
 246 // Very simple implementation of server side script
 247
 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("/>/","&amp;gt;",$code);
 254                 $code = preg_replace("/</","&amp;lt;",$code);
 255                 $language = getLanguage($file);
 256         }
 257 }
 258 ?>
 259
 260 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 261 <html>
 262 <head>
 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?>';
 268         </script>
 269 </head>
 270 <body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
 271 </html>
 272 </textarea>
 273
 274 <textarea id="cp-javascript" class="hidden-code">
 275 CodePress = function(obj) {
 276         var self = document.createElement('iframe');
 277         self.textarea = obj;
 278         self.textarea.disabled = true;
 279         self.style.height = self.textarea.clientHeight +'px';
 280         self.style.width = self.textarea.clientWidth +'px';
 281
 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');
 287         }
 288
 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);
 294         }
 295 }
 296 </textarea>
 297
 298 <textarea id="cp-autoit" class="hidden-code">
 299 #include
 300 IsNumber(15)
 301 @Macro
 302 ;comment
 303 $var = "string"
 304 </textarea>
 305
 306 <textarea id="cp-java" class="hidden-code">
 307 import java.io.FileFilter;
 308 import java.io.IOException;
 309 import java.io.PrintWriter;
 310
 311 /**
 312  * Project ECCO - File manager class
 313  * @author Fernando M.A.d.S.
 314  */
 315 public class FileManager extends HttpServlet {
 316
 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;
 323
 324         public FileFilter filterFiles(File dir) {
 325                 return (new FileFilter() {
 326                         public boolean accept(File pathname) {
 327                                 return !(pathname.isDirectory());
 328                         }
 329                 });
 330         }
 331 }
 332 </textarea>
 333
 334 <textarea id="cp-perl" class="hidden-code">
 335 #!/usr/bin/perl
 336 # The first line of the script envokes Perl
 337
 338 # Scalar variables
 339 $var1 = "Hello World";
 340 $var2 = 14.6;
 341
 342 # Array variables
 343 @arr1 = ("zero","one","two","three","four");
 344
 345 # Hash variable, or associative array
 346 %hash1 = ("one","Monday","two", "Tuesday","three", "Wednesday","four","Thursday");
 347
 348 # Some simple printing
 349 print $var1;
 350
 351 # Subroutine
 352 sub test() {
 353         print "ok";
 354 }
 355 </textarea>
 356
 357 <textarea id="cp-sql" class="hidden-code">
 358 --
 359 -- simple select example
 360 --
 361 SELECT * FROM books
 362         WHERE price > 100.00 and price < 150.00
 363         ORDER BY title
 364
 365 SELECT books.title, count(*) AS Authors
 366         FROM books
 367         JOIN book_authors
 368                 ON books.book_number = book_authors.book_number
 369         GROUP BY books.title
 370
 371 -- insert, update and delete examples
 372
 373 INSERT INTO my_table (field1, field2, field3) VALUES ('test', 'N', NULL);
 374
 375 BEGIN WORK;
 376         UPDATE inventory SET quantity = quantity - 3 WHERE item = 'pants';
 377 COMMIT;
 378 </textarea>
 379
 380 <textarea id="cp-html" class="hidden-code">
 381 <html>
 382 <head>
 383         <title>CodePress - Online Real Time Syntax Highlighting Editor</title>
 384
 385         <style type="text/css">
 386         @import url(styles.css);
 387         </style>
 388         <script type="text/javascript">
 389         function getCode() {
 390                 alert(textWithoutHighlighting);
 391         }
 392         </script>
 393 </head>
 394 <body>
 395 <div id="logo">
 396         <h1><a href="http://codepress.org/">CodePress</a></h1>
 397         <h2>Online Real Time Syntax Highlighting Editor</h2>
 398         <img src="testimage.gif" />
 399 </div>
 400 <div id="languages">
 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>
 404 </div>
 405 </body>
 406 </html>
 407 </textarea>
 408
 409 <textarea id="cp-css" class="hidden-code">
 410 /* CSS comment */
 411
 412 body {
 413         color:#000;
 414         background-color:white;
 415         font:15px Georgia, "Lucida Grande", Arial, sans-serif;
 416         letter-spacing:0.01em;
 417         margin:15px;
 418 }
 419
 420 p {
 421         margin:0 0 15px 0;
 422 }
 423
 424 a,a:visited {
 425         color:#7f0055;
 426 }
 427
 428 select {
 429         background:#ffffe1;
 430 }
 431
 432 h1 {
 433         color:#7f0055;
 434         margin:0;
 435         padding:0;
 436         font-size:42px;
 437 }
 438 </textarea>
 439
 440
 441 <script src="codepress.js" type="text/javascript"></script>
 442 </body>
 443 </html>