Hackadelic EditArea
This plugin integrates EditArea, a real-time syntax-coloring code editor for the web, into WordPress. It will morph specially annotated textarea elements into syntax-aware code editors.
In order to use it, annotate a textarea element with class="editarea $language", where $language is the programming language to use. For example:
<textarea class="editarea php">$who = “World”; echo “Hello $who!”;</textarea>
This is what you get:
Supported languages are:
- basic
- brainfuck
- c
- coldfusion
- cpp
- css
- html
- java
- js
- pas
- perl
- php
- python
- robotstxt
- ruby
- sql
- tsql
- vb
- xml
EditArea is by default enabled in the dashboard (to support back-end plugins), and in pages, but not in posts. You can change that from the dashboard, on the plugin settings page.
Why EditArea?
The plugin is not primarily targeted at end users, but rather at plugin developers who want to provide a syntax-aware code editing experience to their users in their plugins, without re-inventing the wheel related to the underlying technology. Instead, they could just use normal text area elements, and leave it up to this plugin to take care of the rest. All it takes is to document the (optional) dependency to this plugin.
End users benefit the more, the more plugins use this technique. By reusing only one code editor resource, end users will (a) save server disk space, and (b) won’t have to familiarize themselves with different UI’s to accomplish the same thing.
Why Not CodePress?
As of version 2.8, WordPress comes bundled with another syntax-coloring editor: CodePress. However, CodePress uses iframes to do it’s magic. This makes it generally difficult to use in forms, and impossible to use in WP meta-boxes.1 EditArea, on the other hand, does not require any additional code (beyond that in this plugin) to use it. Form and meta-box code works just the same with or without it.
- Meta-boxes are the boxes beneath the wordpress post/page editor. “Custom Fields” is one such box. [↩]
Hi Hackadelic…I have just installed the plugin and activated it, but I’m not seeing the toolbar at the top, or the coloring. In other words, I’m not sure whether or not it’s really working. Is there an additional place, or file, where I need to adjust settings? Thanks a lot
Sshanky, EditArea works with Hackadelic Codification. I suppose you have that one installed, too.
Anyway, if everything went right, there should be a little check box below the text area: “Toggle editor”. Checking it switches to “full mode”. (Initially, the editor is in “plain mode”.)
Looks like a useful plugin, but isn’t it supposed to show code coloring as well? Your little PHP snippet above does not show coloring and without it, what would be the use of specifying the language? If it helps, I’m on FF 3.0.
How about tabifying/indenting? CodePress is remarkably bad at that, so whenever I use it I find myself copy/pasting to/from my regular editor which seems just much more convenient.
Btw: the syntax highlighter you use has been quite further developed, both the JavaScript and the WP plugin. The WordPress plugin is now SyntaxHighlighter Evolved, includes the most recent JS version from Gorbatchev and has been completely rewritten recently for better blending in with WordPress. A fix for the only serious bug (indenting problems) can be downloaded from Under My Hat (until it is added to the SH-E plugin by Viper007).
Abel, it’s just because I’ve temporarily deactivated the plugin (as I’ve been doing some adjustments to the code). Now it should work again. Sorry for the inconvenience.
I know about SyntaxHighlighter Evoloved. I’m about to check out a lossless transition to it on my local test server.
I’ll check out your fix for sure. Thanks for the hint.