CodePress

Online Real Time Syntax Highlighting Editor

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.

Go to http://codepress.org/ for updates.

Demo

choose example in:

<?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-<?php print($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>

//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';
	}
}

Installation

Download and uncompress CodePress under a directory inside your webserver.
Example: http://yourserver/codepress/
Since CodePress is pure JavaScript and HTML, you can also test it without a webserver.
Insert CodePress script somewhere in your page inside the <head> or above the </body> tag.

<script src="/codepress/codepress.js" type="text/javascript"></script>
Add the <textarea> 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.

<textarea id="myCpWindow" class="codepress javascript linenumbers-off">
// your code here
</textarea>
- The javascript portion of the class="" means that the language being edited is JavaScript.
- The codepress portion of the class="" is mandatory and indicates a textarea to be replaced for a CodePress window.
- Other class options are linenumbers-off, autocomplete-off and readonly-on.
- Careful not to use the same id for two different CodePress windows (<textarea id="xx"...>)

You also can...

Open/edit code from a different textarea.
Example: textarea_id.edit('other_textarea_id','language')
Get code from CodePress window.
Example: textarea_id.getCode()
Turn on/off CodePress editor and return to the regular textarea.
Example: textarea_id.toggleEditor()
Turn on/off line numbers.
Example: textarea_id.toggleLineNumbers()
Turn on/off read only.
Example: textarea_id.toggleReadOnly()
Turn on/off auto-complete.
Example: textarea_id.toggleAutoComplete()

License

CodePress is distributed under the LGPL. If your software is compatible with this licence or it is under Creative Commons, you can use it as you want. Just keep the credits somewhere around.