Wordpress: Theme Code Editor

My second proposal is to enhance the template editor with a simple, javascript powered, syntax highlighting editor. I am looking at implementing and building upon the project over at codepress.org (LGPL License).

== Implementation ==
To begin with I would simplify the editor and just implement the basic syntax highlighting for PHP, HTML, CSS & JS. I would then try to eliminate any bugs with thorough testing so there would be a reliable, robust base to build on.
Once this is complete I would hope to add WordPress functions to the PHP bundle.
This project could be continued with additions such as:
* Auto save
* Code snippets
* Code completion
* Linking of WordPress functions to the function reference in the wordpress.org codex.
However it is unlikely that all these features would be implemented within the timescale, (as I think it is better to do one thing thoroughly).

This project would most likely be included as a plugin, but could easily be converted to use in the core if desired.

The code editor works through the use of regular expressions defined for each language in individual .js files the code is then styled with CSS.
Since the coding is all client side JS there will likely be a lot or cross-browser issues to deal with.  I hope to first get the system working in Firefox, but eventually have it functional in all the current major browsers. For any browsers it won’t work in it will degrade gracefully.

The code would be saved to the DB using a jquery ajax call, this would mean code can be saved without the interuption of a page reload and re-syntax-coloring the code. Also it can help avoid data loss if the client’s internet connection drops out while the data is being sent. However it would fall back to the default method if the xmlhttprequest function is not available.

I would also want the editor to catch the ‘tab’ keypress and insert a tab character rather then tabbing to the next html element. This is a very simple change but would, in my opinion, make the editor much more useable. I could also use css to style the tab character to show a grey bar to help the user see where indented code lines up.

== Milestones ==
The first major milestone will be to get the editor implemented. Second I will then fix all major cross-browser issues. I hope to get to this point by half way through the allotted time, this will allow me plenty of time to sort out minor bugs and add ajax code saving. Then if I have time left I will look into adding some of the extra functionality listed earlier.

== About Me ==
I have long had an interest in WordPress and recently become more active in the WP community, mostly as developer of the plugin ‘pageMash’; which I have thoroughly enjoyed developing. I received a lot of great feedback including topic #161869, blog posts such as http://blueprintds.com/2008/03/12/organizing-pages-in-wordpress/, and have been listed in a top 10 WP CMS plugins.
I’m 18 years old and have been in web design and development for about 5 years now but have enjoyed programming ever since primary school. I do some web design work for local businesses; such as easyturn.co.uk and also contract out to a local web design company.  I am experienced with coding standards and enjoy working with other developers. I attend College in the UK studying maths, physics and economics and have been accepted to study computer science at university next year.


GSoC — April 7th, 2008


Leave a Reply

XHTML» permissible tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>