unageanu-jiji 0.1.0

data/html/js/codepress/engines/opera.js

@@ -0,0 +1,260 @@
+/*
+ * CodePress - Real Time Syntax Highlighting Editor written in JavaScript - http://codepress.org/
+ * 
+ * Copyright (C) 2007 Fernando M.A.d.S. <fermads@gmail.com>
+ *
+ * Contributors :
+ *
+ * 	Michael Hurni <michael.hurni@gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or modify it under the terms of the 
+ * GNU Lesser General Public License as published by the Free Software Foundation.
+ * 
+ * Read the full licence: http://www.opensource.org/licenses/lgpl-license.php
+ */
+
+
+CodePress = {
+	scrolling : false,
+	autocomplete : true,
+
+	// set initial vars and start sh
+	initialize : function() {
+		if(typeof(editor)=='undefined' && !arguments[0]) return;
+		chars = '|32|46|62|'; // charcodes that trigger syntax highlighting
+		cc = '\u2009'; // control char
+		editor = document.getElementsByTagName('body')[0];
+		document.designMode = 'on';
+		document.addEventListener('keyup', this.keyHandler, true);
+		window.addEventListener('scroll', function() { if(!CodePress.scrolling) CodePress.syntaxHighlight('scroll') }, false);
+		completeChars = this.getCompleteChars();
+//		CodePress.syntaxHighlight('init');
+	},
+
+	// treat key bindings
+	keyHandler : function(evt) {
+    	keyCode = evt.keyCode;	
+		charCode = evt.charCode;
+
+		if((evt.ctrlKey || evt.metaKey) && evt.shiftKey && charCode!=90)  { // shortcuts = ctrl||appleKey+shift+key!=z(undo) 
+			CodePress.shortcuts(charCode?charCode:keyCode);
+		}
+		else if(completeChars.indexOf('|'+String.fromCharCode(charCode)+'|')!=-1 && CodePress.autocomplete) { // auto complete
+			CodePress.complete(String.fromCharCode(charCode));
+		}
+	    else if(chars.indexOf('|'+charCode+'|')!=-1||keyCode==13) { // syntax highlighting
+		 	CodePress.syntaxHighlight('generic');
+		}
+		else if(keyCode==9 || evt.tabKey) {  // snippets activation (tab)
+			CodePress.snippets(evt);
+		}
+		else if(keyCode==46||keyCode==8) { // save to history when delete or backspace pressed
+		 	CodePress.actions.history[CodePress.actions.next()] = editor.innerHTML;
+		}
+		else if((charCode==122||charCode==121||charCode==90) && evt.ctrlKey) { // undo and redo
+			(charCode==121||evt.shiftKey) ? CodePress.actions.redo() :  CodePress.actions.undo(); 
+			evt.preventDefault();
+		}
+		else if(keyCode==86 && evt.ctrlKey)  { // paste
+			// TODO: pasted text should be parsed and highlighted
+		}
+	},
+
+	// put cursor back to its original position after every parsing
+	findString : function() {
+		var sel = window.getSelection();
+		var range = window.document.createRange();
+		var span = window.document.getElementsByTagName('span')[0];
+			
+		range.selectNode(span);
+		sel.removeAllRanges();
+		sel.addRange(range);
+		span.parentNode.removeChild(span);
+		//if(self.find(cc))
+		//window.getSelection().getRangeAt(0).deleteContents();
+	},
+	
+	// split big files, highlighting parts of it
+	split : function(code,flag) {
+		if(flag=='scroll') {
+			this.scrolling = true;
+			return code;
+		}
+		else {
+			this.scrolling = false;
+			mid = code.indexOf('<SPAN>');
+			if(mid-2000<0) {ini=0;end=4000;}
+			else if(mid+2000>code.length) {ini=code.length-4000;end=code.length;}
+			else {ini=mid-2000;end=mid+2000;}
+			code = code.substring(ini,end);
+			return code;
+		}
+	},
+	
+	// syntax highlighting parser
+	syntaxHighlight : function(flag) {
+		//if(document.designMode=='off') document.designMode='on'
+		if(flag!='init') {
+			var span = document.createElement('span');
+			window.getSelection().getRangeAt(0).insertNode(span);
+		}
+
+		o = editor.innerHTML;
+//		o = o.replace(/<br>/g,'\r\n');
+//		o = o.replace(/<(b|i|s|u|a|em|tt|ins|big|cite|strong)?>/g,'');
+		//alert(o)
+		o = o.replace(/<(?!span|\/span|br).*?>/gi,'');
+//		alert(o)
+//		x = o;
+		x = z = this.split(o,flag);
+		//alert(z)
+//		x = x.replace(/\r\n/g,'<br>');
+		x = x.replace(/\t/g, '        ');
+
+
+		if(arguments[1]&&arguments[2]) x = x.replace(arguments[1],arguments[2]);
+	
+		for(i=0;i<Language.syntax.length;i++) 
+			x = x.replace(Language.syntax[i].input,Language.syntax[i].output);
+
+		editor.innerHTML = this.actions.history[this.actions.next()] = (flag=='scroll') ? x : o.split(z).join(x); 
+
+		if(flag!='init') this.findString();
+	},
+	
+	getLastWord : function() {
+		var rangeAndCaret = CodePress.getRangeAndCaret();
+		words = rangeAndCaret[0].substring(rangeAndCaret[1]-40,rangeAndCaret[1]);
+		words = words.replace(/[\s\n\r\);\W]/g,'\n').split('\n');
+		return words[words.length-1].replace(/[\W]/gi,'').toLowerCase();
+	}, 
+	
+	snippets : function(evt) {
+		var snippets = Language.snippets;	
+		var trigger = this.getLastWord();
+		for (var i=0; i<snippets.length; i++) {
+			if(snippets[i].input == trigger) {
+				var content = snippets[i].output.replace(/</g,'&lt;');
+				content = content.replace(/>/g,'&gt;');
+				if(content.indexOf('$0')<0) content += cc;
+				else content = content.replace(/\$0/,cc);
+				content = content.replace(/\n/g,'<br>');
+				var pattern = new RegExp(trigger+cc,'gi');
+				evt.preventDefault(); // prevent the tab key from being added
+				this.syntaxHighlight('snippets',pattern,content);
+			}
+		}
+	},
+	
+	readOnly : function() {
+		document.designMode = (arguments[0]) ? 'off' : 'on';
+	},
+
+	complete : function(trigger) {
+		window.getSelection().getRangeAt(0).deleteContents();
+		var complete = Language.complete;
+		for (var i=0; i<complete.length; i++) {
+			if(complete[i].input == trigger) {
+				var pattern = new RegExp('\\'+trigger+cc);
+				var content = complete[i].output.replace(/\$0/g,cc);
+				parent.setTimeout(function () { CodePress.syntaxHighlight('complete',pattern,content)},0); // wait for char to appear on screen
+			}
+		}
+	},
+
+	getCompleteChars : function() {
+		var cChars = '';
+		for(var i=0;i<Language.complete.length;i++)
+			cChars += '|'+Language.complete[i].input;
+		return cChars+'|';
+	},
+
+	shortcuts : function() {
+		var cCode = arguments[0];
+		if(cCode==13) cCode = '[enter]';
+		else if(cCode==32) cCode = '[space]';
+		else cCode = '['+String.fromCharCode(charCode).toLowerCase()+']';
+		for(var i=0;i<Language.shortcuts.length;i++)
+			if(Language.shortcuts[i].input == cCode)
+				this.insertCode(Language.shortcuts[i].output,false);
+	},
+	
+	getRangeAndCaret : function() {	
+		var range = window.getSelection().getRangeAt(0);
+		var range2 = range.cloneRange();
+		var node = range.endContainer;			
+		var caret = range.endOffset;
+		range2.selectNode(node);	
+		return [range2.toString(),caret];
+	},
+	
+	insertCode : function(code,replaceCursorBefore) {
+		var range = window.getSelection().getRangeAt(0);
+		var node = window.document.createTextNode(code);
+		var selct = window.getSelection();
+		var range2 = range.cloneRange();
+		// Insert text at cursor position
+		selct.removeAllRanges();
+		range.deleteContents();
+		range.insertNode(node);
+		// Move the cursor to the end of text
+		range2.selectNode(node);		
+		range2.collapse(replaceCursorBefore);
+		selct.removeAllRanges();
+		selct.addRange(range2);
+	},
+	
+	// get code from editor
+	getCode : function() {
+		var code = editor.innerHTML;
+		code = code.replace(/<br>/g,'\n');
+		code = code.replace(/\u2009/g,'');
+		code = code.replace(/<.*?>/g,'');
+		code = code.replace(/&lt;/g,'<');
+		code = code.replace(/&gt;/g,'>');
+		code = code.replace(/&amp;/gi,'&');
+		return code;
+	},
+
+	// put code inside editor
+	setCode : function() {
+		var code = arguments[0];
+		code = code.replace(/\u2009/gi,'');
+		code = code.replace(/&/gi,'&amp;');
+       	code = code.replace(/</g,'&lt;');
+        code = code.replace(/>/g,'&gt;');
+		editor.innerHTML = code;
+	},
+
+	// undo and redo methods
+	actions : {
+		pos : -1, // actual history position
+		history : [], // history vector
+		
+		undo : function() {
+			if(editor.innerHTML.indexOf(cc)==-1){
+				window.getSelection().getRangeAt(0).insertNode(document.createTextNode(cc));
+			 	this.history[this.pos] = editor.innerHTML;
+			}
+			this.pos--;
+			if(typeof(this.history[this.pos])=='undefined') this.pos++;
+			editor.innerHTML = this.history[this.pos];
+			CodePress.findString();
+		},
+		
+		redo : function() {
+			this.pos++;
+			if(typeof(this.history[this.pos])=='undefined') this.pos--;
+			editor.innerHTML = this.history[this.pos];
+			CodePress.findString();
+		},
+		
+		next : function() { // get next vector position and clean old ones
+			if(this.pos>20) this.history[this.pos-21] = undefined;
+			return ++this.pos;
+		}
+	}
+}
+
+Language={};
+window.addEventListener('load', function() { CodePress.initialize('new'); }, true);

data/html/js/codepress/index.html

@@ -0,0 +1,443 @@
+<!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">&nbsp;&nbsp;Install&nbsp;&nbsp;</a>
+	</td>
+	<td>
+		<a href="http://www.codepress.org/to-do.php">&nbsp;&nbsp;To-do&nbsp;&nbsp;</a>
+	</td>
+	<td>
+		<a href="http://www.codepress.org/about.php" id="about">&nbsp;&nbsp;About&nbsp;&nbsp;</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("/>/","&amp;gt;",$code);
+		$code = preg_replace("/</","&amp;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 linenumbers-off" 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>&lt;head&gt;</code> or above the <code>&lt;/body&gt;</code> tag.
+		</p>
+	
+		<p class="copycode">
+			&lt;script src="/codepress/codepress.js" type="text/javascript"&gt;&lt;/script&gt;
+		</p>
+	</li>
+	
+	<li>
+		<p>
+			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.
+			When the page loads, it will automatically replace your textarea with a CodePress window.
+		</p>
+		<p class="copycode">
+			&lt;textarea id="myCpWindow" class="codepress javascript linenumbers-off"&gt;<br />
+			&nbsp;&nbsp;&nbsp;// your code here<br />
+			&lt;/textarea&gt;
+		</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>&lt;textarea id="<strong>xx</strong>"...&gt;</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("/>/","&amp;gt;",$code);
+		$code = preg_replace("/</","&amp;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>