Code editing in-browser

My first concern when creating a service for people to share code is the best method of allowing people to view and edit code from within the browser. In order to display code in a readable fashion, I’ll need to ensure that the application is capable of displaying indenting and syntax highlighting.

The indentation of lines or blocks of code creates visually separate blocks which help to give a clear view of the structure of the program while syntax highlighting creates easily recognizable markers which allow the reader to easily identify certain elements within a block of code, for example a string of text or a variable name.

While both are relatively simple to display as static content, retaining the syntax highlighting during the editing of the code requires much more comprehensive text editing functionality than browsers natively support. Rendering syntax highlighted code – or multi-coloured text in general – in a web browser requires the text to be laced with HTML to dictate colors which must be generated and injected into the string before rendering without interfering with user input.

The most realistic approach to this requirement is to look to pre-built open source software which provides a solution to this. Ace (http://ace.c9.io/) is a tried and tested solution to this problem used by a number of reputable and heavily used services including GitHub and Wikipedia.
(From the Ace website)

Ace provides a well documented API and the ability to easily hook into events such as adding and removing lines or selecting text allowing it to be easily extended to include features specific to my application.

I was able to create the most basic prototype for my application in seconds by loading Ace into a panel in one half of the screen and an iframe in the other half which displays the contents of a dataurl compiled from the content of the Ace panel whenever a change is made by a user.