/chrome/content/zk/codepress/index.html
HTML | 443 lines | 371 code | 65 blank | 7 comment | 0 complexity | 8c97ffc51d851f159a1c4d284bf78cf2 MD5 | raw file
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
- <html>
- <head>
- <title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
-
- <style>
- body {color:#000;background-color:white;font:15px georgia, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; letter-spacing:0.01em;margin:15px;}
- p {margin:0 0 15px 0;}
- a,a:visited {color:#7f0055;}
- select {background:#ffffe1;}
- button {margin-top:5px;}
- button.actions {width:171px;font-family:arial;}
- h1 {color:#7f0055;margin:0;padding:0;font-size:42px;font-weight:normal;}
- h1 a {text-decoration:none;}
- h2 {margin:0;}
- h2 a {text-decoration:none;font-weight:normal;font-size:22px;color:black !important;}
- h3 {font-size:20px;font-weight:normal;padding:0;margin:25px 0 5px 0;color:#7f0055;font-weight:bold;border-bottom:2px dotted #d8d8d8;}
- h4 {font-size:18px;font-weight:normal;z-index:0;}
- code {color:#0080c0;font-size:13px;font-weight:bold;}
- ol, ul {padding:5px 0 5px 25px;margin:0;}
- ol li, ul li {margin:8px 0 8px 0;}
-
- #logo {text-align:center;background-color:#d6d6d6;padding:10px;-moz-border-radius:5px;border:1px solid silver;}
- #container {width:700px;margin:20px auto;padding:25px;border:3px solid #d9d9d9;-moz-border-radius:10px;background:#f8f8f8;}
- #languages {margin:5px 0;}
-
- #menu {width:100%;background:#7f0055;-moz-border-radius:4px;}
- #menu a {font:bold 17px georgia;color:white;padding:4px;display:block;border-left:1px solid white;text-align:center;text-decoration:none;}
- #menu a:hover {background:#b9669e;}
-
- .hidden-code {display:none;}
- .copycode {border:1px dotted gray;padding:10px;background:white;font-family:monospace;color:gray}
- </style>
-
- </head>
-
- <body>
- <div id="container">
-
- <div id="logo">
- <h1><a href="http://codepress.org/">CodePress</a></h1>
- <h2><a href="http://codepress.org/">Online Real Time Syntax Highlighting Editor</a></h2>
- </div>
-
- <br />
-
- <table cellpadding="0" cellspacing="0" id="menu">
- <tr>
- <td>
- <a href="http://www.codepress.org/index.php">Home/Download</a>
- </td>
- <td>
- <a href="http://www.codepress.org/install.php"> Install </a>
- </td>
- <td>
- <a href="http://www.codepress.org/to-do.php"> To-do </a>
- </td>
- <td>
- <a href="http://www.codepress.org/about.php" id="about"> About </a>
- </td>
- </tr>
- </table>
-
- <h4>
- 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.
- </h4>
-
- <p>
- Go to <strong><a href="http://codepress.org/">http://codepress.org/</a></strong> for updates.
- </p>
-
- <h3>Demo</h3>
- <div id="languages">
- <em>choose example in:</em>
- <button onclick="cp1.edit('cp-php','php')">PHP</button>
- <button onclick="cp1.edit('cp-javascript','javascript')">JavaScript</button>
- <button onclick="cp1.edit('cp-java','java')">Java</button>
- <button onclick="cp1.edit('cp-perl','perl')">Perl</button>
- <button onclick="cp1.edit('cp-sql','sql')">SQL</button>
- <button onclick="cp1.edit('cp-html','html')">HTML</button>
- <button onclick="cp1.edit('cp-css','css')">CSS</button>
- </div>
-
- <textarea id="cp1" class="codepress php" style="width:700px;height:300px;" wrap="off">
- <?php
- // Very simple implementation of server side script
-
- if(isset($_GET['file'])) {
- $file = basename($_GET['file']);
- $full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
- if(file_exists($full_file)) {
- $code = file_get_contents($full_file);
- $code = preg_replace("/>/","&gt;",$code);
- $code = preg_replace("/</","&lt;",$code);
- $language = getLanguage($file);
- }
- }
- ?>
-
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
- <link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" />
- <script type="text/javascript" src="codepress.js"></script>
- <script type="text/javascript">
- CodePress.language = '<?=$language?>';
- </script>
- </head>
- <body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
- </html>
- </textarea>
-
- <br /><br />
-
- <textarea id="codepress2" class="codepress javascript" style="width:700px;height:200px;" wrap="off">
- //set language
- this.setLanguage = function() {
- if(arguments[0]) {
- language = (typeof(Content.languages[arguments[0]])!='undefined') ? arguments[0] : this.setLanguage();
- cpLanguage.innerHTML = Content.languages[language].name;
- if(cpBody.document.designMode=='on') cpBody.document.designMode = 'off';
- CodePress.loadScript(cpBody.document, '../languages/'+language+'.js', function () { cpBody.CodePress.syntaxHighlight('init'); })
- cpBody.document.getElementById('cp-lang-style').href = '../languages/'+language+'.css';
- this.hideMenu();
- }
- else {
- var extension = filename.replace(/.*\.([^\.]+)$/,'$1');
- var aux = false;
- for(lang in Content.languages) {
- extensions = ','+Content.languages[lang].extensions+',';
- if(extensions.match(','+extension+',')) aux = lang;
- }
- language = (aux) ? aux : 'generic';
- }
- }
- </textarea>
-
- <p>
- <button class="actions" onclick="alert(codepress2.getCode())">get code from editor</button>
- <button class="actions" onclick="codepress2.toggleEditor()">turn on/off CodePress</button>
- <button class="actions" onclick="codepress2.toggleLineNumbers()">show/hide line numbers</button>
- <button class="actions" onclick="codepress2.toggleAutoComplete()">turn on/off auto-complete</button>
- <button class="actions" onclick="codepress2.toggleReadOnly()">turn on/off read only</button>
- </p>
-
-
-
- <h3>Installation</h3>
- <ol>
- <li>
- <p>
- <a href="http://codepress.org/">Download</a> and uncompress CodePress under a directory inside your webserver.<br>
- Example:<strong> http://yourserver/codepress/</strong><br />
- Since CodePress is pure JavaScript and HTML, you can also test it without a webserver.
- </p>
- </li>
- <li>
- <p>
- Insert CodePress script somewhere in your page inside the <code><head></code> or above the <code></body></code> tag.
- </p>
-
- <p class="copycode">
- <script src="/codepress/codepress.js" type="text/javascript"></script>
- </p>
- </li>
-
- <li>
- <p>
- 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.
- When the page loads, it will automatically replace your textarea with a CodePress window.
- </p>
- <p class="copycode">
- <textarea id="myCpWindow" class="codepress javascript linenumbers-off"><br />
- // your code here<br />
- </textarea>
- </p>
- <ul>
- <li>
- The <code>javascript</code> portion of the class="" means that the language being edited is JavaScript.
- </li>
- <li>
- The <code>codepress</code> portion of the class="" is mandatory and indicates a textarea to be replaced for a CodePress window.
- </li>
- <li>
- Other class options are <code>linenumbers-off</code>, <code>autocomplete-off</code> and <code>readonly-on</code>.
- </li>
- <li>
- Careful not to use the same id for two different CodePress windows (<code><textarea id="<strong>xx</strong>"...></code>)
- </li>
- </ul>
-
- </li>
- </ol>
-
- <h3>You also can...</h3>
- <ol>
- <li>
- Open/edit code from a different textarea.<br />
- Example: <code>textarea_id.edit('other_textarea_id','language')</code><br>
- </li>
- <li>
- Get code from CodePress window.<br />
- Example: <code>textarea_id.getCode()</code><br>
- </li>
- <li>
- Turn on/off CodePress editor and return to the regular textarea.<br />
- Example: <code>textarea_id.toggleEditor()</code><br>
- </li>
- <li>
- Turn on/off line numbers.<br />
- Example: <code>textarea_id.toggleLineNumbers()</code><br>
- </li>
- <li>
- Turn on/off read only.<br />
- Example: <code>textarea_id.toggleReadOnly()</code><br>
- </li>
- <li>
- Turn on/off auto-complete.<br />
- Example: <code>textarea_id.toggleAutoComplete()</code><br>
- </li>
-
- </ol>
-
- <!-- p>
- 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.
- </p>
- <p>
- 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).
- </p -->
-
- <h3>License</h3>
- <p>
- 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.
- </p>
-
-
- </div><!--/container-->
-
-
-
- <!-- hidden codes for loading -->
- <textarea id="cp-php" class="hidden-code">
- <?php
- // Very simple implementation of server side script
-
- if(isset($_GET['file'])) {
- $file = basename($_GET['file']);
- $full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
- if(file_exists($full_file)) {
- $code = file_get_contents($full_file);
- $code = preg_replace("/>/","&gt;",$code);
- $code = preg_replace("/</","&lt;",$code);
- $language = getLanguage($file);
- }
- }
- ?>
-
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
- <link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" />
- <script type="text/javascript" src="codepress.js"></script>
- <script type="text/javascript">
- CodePress.language = '<?=$language?>';
- </script>
- </head>
- <body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
- </html>
- </textarea>
-
- <textarea id="cp-javascript" class="hidden-code">
- CodePress = function(obj) {
- var self = document.createElement('iframe');
- self.textarea = obj;
- self.textarea.disabled = true;
- self.style.height = self.textarea.clientHeight +'px';
- self.style.width = self.textarea.clientWidth +'px';
-
- self.initialize = function() {
- self.editor = self.contentWindow.CodePress;
- self.editor.body = self.contentWindow.document.getElementsByTagName('body')[0];
- self.editor.setCode(self.textarea.value);
- self.editor.syntaxHighlight('init');
- }
-
- self.edit = function(id,language) {
- self.language = (language) ? language : self.textarea.className.replace(/ ?codepress ?/,'');
- self.src = cpPath+'modules/codepress.html?engine='+self.getEngine()+'&language='+self.language;
- if(self.attachEvent) self.attachEvent('onload',self.initialize);
- else self.addEventListener('load',self.initialize,false);
- }
- }
- </textarea>
-
- <textarea id="cp-autoit" class="hidden-code">
- #include
- IsNumber(15)
- @Macro
- ;comment
- $var = "string"
- </textarea>
-
- <textarea id="cp-java" class="hidden-code">
- import java.io.FileFilter;
- import java.io.IOException;
- import java.io.PrintWriter;
-
- /**
- * Project ECCO - File manager class
- * @author Fernando M.A.d.S.
- */
- public class FileManager extends HttpServlet {
-
- private static final long serialVersionUID = 1L;
- private static String login = "feanndor"; // session var should come here
- private static String usersPath = System.getProperty("user.dir")+File.separator+"htdocs"+File.separator+"ecco"+File.separator+"users"+File.separator;
- private static File dir = new File(usersPath+login+File.separator);
- static boolean existDirectories = false;
- static int isDirectory = 0;
-
- public FileFilter filterFiles(File dir) {
- return (new FileFilter() {
- public boolean accept(File pathname) {
- return !(pathname.isDirectory());
- }
- });
- }
- }
- </textarea>
-
- <textarea id="cp-perl" class="hidden-code">
- #!/usr/bin/perl
- # The first line of the script envokes Perl
-
- # Scalar variables
- $var1 = "Hello World";
- $var2 = 14.6;
-
- # Array variables
- @arr1 = ("zero","one","two","three","four");
-
- # Hash variable, or associative array
- %hash1 = ("one","Monday","two", "Tuesday","three", "Wednesday","four","Thursday");
-
- # Some simple printing
- print $var1;
-
- # Subroutine
- sub test() {
- print "ok";
- }
- </textarea>
-
- <textarea id="cp-sql" class="hidden-code">
- --
- -- simple select example
- --
- SELECT * FROM books
- WHERE price > 100.00 and price < 150.00
- ORDER BY title
-
- SELECT books.title, count(*) AS Authors
- FROM books
- JOIN book_authors
- ON books.book_number = book_authors.book_number
- GROUP BY books.title
-
- -- insert, update and delete examples
-
- INSERT INTO my_table (field1, field2, field3) VALUES ('test', 'N', NULL);
-
- BEGIN WORK;
- UPDATE inventory SET quantity = quantity - 3 WHERE item = 'pants';
- COMMIT;
- </textarea>
-
- <textarea id="cp-html" class="hidden-code">
- <html>
- <head>
- <title>CodePress - Online Real Time Syntax Highlighting Editor</title>
-
- <style type="text/css">
- @import url(styles.css);
- </style>
- <script type="text/javascript">
- function getCode() {
- alert(textWithoutHighlighting);
- }
- </script>
- </head>
- <body>
- <div id="logo">
- <h1><a href="http://codepress.org/">CodePress</a></h1>
- <h2>Online Real Time Syntax Highlighting Editor</h2>
- <img src="testimage.gif" />
- </div>
- <div id="languages">
- <em>choose language:</em>
- <button onclick="edit('codepress.php',this)" id="default">PHP</button>
- <button onclick="edit('FileManager.java',this)">Java</button>
- </div>
- </body>
- </html>
- </textarea>
-
- <textarea id="cp-css" class="hidden-code">
- /* CSS comment */
-
- body {
- color:#000;
- background-color:white;
- font:15px Georgia, "Lucida Grande", Arial, sans-serif;
- letter-spacing:0.01em;
- margin:15px;
- }
-
- p {
- margin:0 0 15px 0;
- }
-
- a,a:visited {
- color:#7f0055;
- }
-
- select {
- background:#ffffe1;
- }
-
- h1 {
- color:#7f0055;
- margin:0;
- padding:0;
- font-size:42px;
- }
- </textarea>
-
-
- <script src="codepress.js" type="text/javascript"></script>
- </body>
- </html>