Requirement

Language support

• Support JavaScript, HTML, and CSS
• Format JavaScript, HTML, and CSS
• Syntax Highlight JavaScript, HTML, and CSS
• Execute JavaScript

formating

• add a concept of formatter? like YUI Datatable.
• http://tools.arantius.com/tabifier for formatting a textarea in a SourceCodeField
• http://elfz.laacz.lv/beautify/ for JavaScript

Research

Code highlight and editor

• http://marijn.haverbeke.nl/codemirror/ - js parser, demo
• http://www.cdolivet.net/editarea/ - use js regex , demo
• http://en.wikipedia.org/wiki/Comparison_of_Javascript-based_source_code_editors

Syntax Highlight

• http://code.google.com/p/syntaxhighlighter/

Code Formatting

JavaScript

• http://elfz.laacz.lv/beautify/
• http://javascript.about.com/library/blformat.htm
• JavaScript formatting - work for FF only

    function doFormat(jsv) {
        if (jsv.value != "") {
            try {
                eval("var tmpf = function(){" + jsv.value + "}");
                var fjs = tmpf.toString();
                jsv.value = fjs.substring(fjs.indexOf("{") + 1, fjs.lastIndexOf("}"));
            } catch (ex) {
                jsv.value = ex.toString();
            }
        }
    }

HTML and CSS formatting

• http://tools.arantius.com/tabifier
• http://www.smashingmagazine.com/2007/07/12/time-savers-code-beautifier-and-formatter/ - Not just online javascript formatter
• JTidy + Applet