CodePress

Online Real Time Syntax Highlighting Editor written in JavaScript

CodePress is the first web-based source code editor/library with syntax highlighting written in JavaScript that colors text in real time while it's being typed in the browser.

Features

You can try some features with the demo below.

Real-time syntax highlighting » just write some code
Code snippets » on PHP example type "if" and press [tab]
Auto completion » simple type " or ( or ' or [ or { on any example below (except Plain Text)
Shortcuts » on PHP example press [ctrl][shift][space]. It's shortcut to  
Multiple windows » you can add multiple CodePress windows to the same page

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-<?=$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';
	}
}

Download v.0.9.6 (26 sep 07)

Browsers have evolved and to acomplish real-time syntax highlighting today is much faster and easier. Codepress is outdated and discontinued.

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.

To know a little more about this project, go to the about section.

<?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>

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);
	}
}

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());
			}
		});
	}
}

#!/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";
}

--
-- 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;


<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="container">

<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>

</div><!--/container-->
</body>
</html>

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