Alien-CodePress

 view release on metacpan or  search on metacpan

cp/codepress/index.html  view on Meta::CPAN

	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>



( run in 0.941 second using v1.01-cache-2.11-cpan-fa01517f264 )