CodePress

Online Real Time Syntax Highlighting Editor written in JavaScript

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.

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)

It has been some time since last update. CodePress project was freezed, but me and Michael are now back. I really don't know the frequency of future releases but we are working on it. This release is more like a "we are alive" release. A real release with new features is coming.

Regards
fermads

codepress-v.0.9.6.zip » Package with CodePress and examples

Known issues

Line numbers do not resize with browser font size (because it's a bg image)
Copy from CodePress and paste somewhere else is not working correctly on Internet Explorer. Fixed for Firefox on version 0.9.6.

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.

Comments (are frozen, please use the forum)

These are the last 25 comments. See everything.

Martin » 2007-05-13

i decided to change the snippet detector a bit (my upgraded function scope one)

if a pre-defined language snippet reacts to "func" and a function named funcTastic() exists, then youll need to write either "fun" or "funct" to trigger the scoped' one where "func" will trigger the snippet

i did this by swapping the two loops within the snippets() function

fermads » 2007-05-13

Hi guys!

Thanks for all the comments here :)) I think we should move this conversation to SourceForge forum. I'm reopening the forum on SF and freezing the comments here.

Martin, I'm really going to spend some time on your code. I tested your function scope and it's really really nice :) By the way, v.0.9.5 already has your VB and ASP syntax highlighting and some fixes for snippets detection.

Regards

Comments are frozen. Please, use the forum

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