Code Editor with Realtime Syntax Highlighting: JS-CodeEdit
Posted on January 5, 2010, under JavaScript, 
Bookmark it
JS-CodeEdit is a JavaScript editor that converts your HTML textareas into a code editor with realtime syntax highlighting. If added into a form, the content can be submitted e.g. to be written to a file. A nice thing is that you can add as many editors as you want within a HTML page.
Currently the code editor supports the following languages: PHP, JavaScript, HTML, CSS.
Generally, this code editor should work on Windows with IE 5+ and with browser using the Mozilla 1.3+ engine (browsers that support “designMode”).
How to use it?
1) Include the codeedit.js library in the HTML page
2) Edit any textarea that contains code in it:
<textarea name="myEditor1" class="codeedit php linenumbers" wrap="off" cols="80" rows="20">[php code here]</textarea>
Note: For the class name the first values should be ‘codeedit’ followed by the language you want to highlight: (either php, javascript, html or css).
- Source: http://www.gerd-tentler.de/tools/codeedit/
- Download: http://www.gerd-tentler.de/tools/codeedit/?page=download
- Tested in: IE 8, Opera 9, FF 3
- License: Freeware for non-commercial use (if used commercially, a donation should be made)
Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!
- January 5, 2010
- article by Gabriel C.
- 2 comments
Related Posts
-
TinyEditor: Lightweight, Customizable & Standalone WYSIWYG editorat February 9, 2010
-
7 Awesome Free Syntax Highlighters – To Enhance User Readabilityat August 29, 2009 with 6 comments
-
Free, Fast, Professional & Easy to Use WYSIWYG Editor: CKEditorat August 27, 2009
-
Simple Web-Based MooTools WYSIWYG Editor: MooEditableat December 28, 2009
-
jQuery Tools – A Collection of the Most Important UI Componentsat June 5, 2009 with 1 comment
-
AJAX Form with CAPTCHA, Realtime Validation and PHP BackendPublished on 09.02.08, 534 replies.
-
Dynamic Dependant DropDown List: US States & CountiesPublished on 11.06.08, 83 replies.
-
An AJAX (jQuery) Username Availability Checker with PHP Back-endPublished on 12.05.08, 61 replies.
-
How to Implement a jQuery AJAX Login Form into a Modal BoxPublished on 04.24.09, 84 replies.
-
How to Add Multi-language Support to a PHP WebsitePublished on 07.23.09, 79 replies.
-
10 Mistakes Info-Marketers Need To Know And Avoid In Order To Succeedby Gabriel C. on February 3, 2012
-
In-Depth Instant CSS Documentation Search: InstaCSS
by Gabriel C. on December 2, 2011
-
Factors to Consider When Choosing a Font
by Gabriel C. on November 15, 2011
-
Bootstrap: Kick-start Development of Webapps and Sites
by Gabriel C. on November 8, 2011
For people who seem to be receiving auto responder emails twice, the issue can beon December 30th, 2011 by Donina
I'm with Garfield a few posts up...for adding new data it's awesome. When Ion November 9th, 2011 by Rudy
I am getting an error when trying to upload an image that is around 2MB Fatalon November 8th, 2011 by Trew Knowledge
- AJAX (20)
- Design (16)
- Flash (19)
- Freebies (10)
- General (17)
- Graphics (22)
- HTML & CSS (33)
- Frameworks (8)
- JavaScript (142)
- Frameworks (5)
- jQuery (74)
- MooTools (13)
- Photoshop (3)
- PHP (103)
- Reviews (5)
- Statistics (2)
- Web Tools (8)
- Wordpress (16)
- February 2012
- December 2011
- November 2011
- October 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- May 2008
Tag Cloud
- ajax form builder
- ajax login
- alphabetical
- array
- auto grow
- base
- calculate
- captcha
- chart
- charts
- countdown
- css framework
- delimiters
- documents
- dropdown
- extension
- extract
- filename
- fonts
- form
- gd library
- icon set
- iphone
- lightbox
- modal box
- mod_rewrite
- percent
- Photo Gallery
- picker
- random
- remove
- script.aculo.us
- search
- shopping cart
- skin form elements
- slider
- syntax highlighter
- tableless
- to-do
- validate
- web analytics
- web fetch
- WYSIWYG
- zoom
2 Replies to "Code Editor with Realtime Syntax Highlighting: JS-CodeEdit"
March 12, 2010 at 12:04 AM
I just wanted to say awesome job! I really like this.
I have some future suggestions:
Create a customizable way to add in key words of a language and be able to format individual key words i.e. whether you would like an individual key word to be blue, green, bold or italicized etc.
It would be nice to have these customized key word’s formats stored in CSS files.
Speed up the approach to your algorithm so that even large files don’t take so much time in processing key words. Maybe cache already highlighted key words or chunk out areas of code which are to be processed by your highlighting search algorithm.
March 12, 2010 at 12:07 AM
O also extend the code so that more languages are available for highlighting… which it sounds like you might already be working on.
Great JOB! I can’t wait to see this grow :D!!!!