Feature Proposal: Syntax Highlighting Editor

Motivation

I use Movable Type. I really like the Syntax Highlighting option in the (otherwise simple textarea) editor.

Description and Documentation

I'm not a fan of WYSI(a)WYG. But I do like Syntax highlighting. I especially like it when syntax highlighting helps highlight bugs (e.g. a missing " may cause a chunk of code to run away in blue).

Movable Type (the weblogging system) has a nice syntax highlighting feature. It occurred to me that Foswiki could benefit from something like this.

Examples

• Screenshot of syntax highlighting in Movable Type:

Impact

WhatDoesItAffect:

User Experience

edit

Implementation

-- Contributors: VickiBrown - 24 Sep 2009

Discussion

Which editor would you like to have highlighting, and what would you like to see highlighted? In WYSIWYG macros are already highlighted (a little bit).

I have heard some users complain that white space is too important (i.e. for preference settings, need 3 spaces then a star) and they would like it if it was more obvious in some way. Can't think how we could do that though.

-- AndrewJones - 24 Sep 2009

This comes back to the Macro definition proposal that I had years ago - where tags need to register their supported params and docco - so that we can do non-naive syntax highlighting, have macro specific editing tools and context sensitive help and syntax checking

it'll be interesting to see what can be done about the partial tag mess you can make, but i hope there aren't too many people that doit

%EX%BananaTopic%AMPLE%
   * Set EX=%INCLUDE{"
   * Set AMPLE="}%

is currently legal - but from a backend pov, its not helpful

-- SvenDowideit - 24 Sep 2009

I like Vicki's suggestion of syntx highlighting when editing TML.

http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors lists several possibilities.

• I see there is a CodePress plugin for JQuery. But CodePress is not being maintained.
• CodeMirror apparently has a true parser, whereas Foswiki uses regexps for matching TML. CodePress and EditArea seem to use regexps instead. I can't comment on which would be better for TML.
• CodeMirror and EditArea seem actively maintained.
• EditArea uses a rather novel approach - putting the highlighting behind the text.

-- MichaelTempest - 25 Sep 2009

The best you can do (and it's probably enough 99% of the time) is to highlight the first level of macros - those that would be identified by the "inside out left right" parser that Foswiki uses. So Sven's example might appear as (for example):

%EX%BananaTopic%AMPLE%

• Set EX=%INCLUDE{"
• Set AMPLE="}%

Because of the way macro nesting works, simple regexes wouldn't be powerful enough, but a simple emulation of the rendering engine should do the job. I wrote one in Javascript (a translation of the WysiwygPlugin engine) some time ago.

-- CrawfordCurrie - 28 Sep 2009