Code Editor with Realtime Syntax Highlighting: JS-CodeEdit
Posted on January 5, 2010, Filled 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
Catch404: Modal Plugin for Handling Broken Links: jQuery | CSSby Gabriel C. on July 31, 2010
Discover How to Make a Website: 50 Mistakes You Should Avoidby Gabriel C. on July 13, 2010
Simple Lightboxing | The Programmer's Lightbox Tool | Lightbox_meby Gabriel C. on June 4, 2010
Grab a copy of Six Figure Affiliate Blogging: Free eBookby Gabriel C. on May 18, 2010
- High resolution zoom with image tiles: http://www.ajax-zoom.com
on August 26th, 2010 by SF
- Hi,I have implement this. When successfully logged in then not redirect to private.php... It just
on August 25th, 2010 by rashidul
- Hi, here in italian we have problem with "è, ì, à, ò" when my customer
on August 25th, 2010 by arcibald
- Hey, I wanted to know how to make this into SMTP method, cuz my server filters
on August 25th, 2010 by Anks
Categories
- AJAX (18)
- Design (9)
- Flash (19)
- Freebies (5)
- General (3)
- Graphics (13)
- HTML & CSS (28)
- Frameworks (7)
- JavaScript (122)
- Frameworks (4)
- jQuery (58)
- MooTools (13)
- Photoshop (2)
- PHP (102)
- Reviews (4)
- Statistics (2)
- Web Tools (6)
- Wordpress (14)
Poll
Loading ...Tag Cloud
- 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
- 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
!!!!