1 (edited by mvlcek 2011-06-24 13:42:29)

Topic: Syntax Highlighting when editing Themes and Components

Theme Highlighter performs syntax highlighting when you edit the theme or the components in the administration and simplifies editing:

  • suggests GetSimple functions, plugin functions and common PHP functions, when you press Ctrl-Space (version 0.8+)

  • shows a color preview, when moving the mouse over a CSS color (version 0.9+)

  • shows a color picker, when you press Ctrl-Space (version 0.9+)

  • suggests CSS property names, when you press Ctrl-Space elsewhere during CSS editing (version 0.8+)

  • maximizes the editor, when you press F11 (version 0.9+)

Installation

Unzip the plugin (http://get-simple.info/extend/plugin/th … ghter/186/) to your plugins directory.

Usage

Go to Theme/Edit Theme or Theme/Edit Components in the administration. The text in the text areas should be colored.

  • Press F11 to maximize the editor

  • Press Ctrl-Space on PHP code, CSS code or CSS colors to get suggestions or the color picker.

  • Select a suggestion with Enter or close the suggestions with ESC

  • Select a color by clicking elsewhere or pressing Enter, abort with ESC

I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.

Re: Syntax Highlighting when editing Themes and Components

Nice.

When I upload the zip-file to my webpage and unzip it there (using cpanel), I see that the file and folder permissions are all 777. For most other plugins this is (by default) 644 for files and 755 for folders. This seems to be the case with all your plugins and this new one is no exception. I hope you might want to fix this for future releases.

Re: Syntax Highlighting when editing Themes and Components

Works like I am editing in a code-friendly text editor, now with the ability to see line numbers. No problems.

In a word: perfect.

Tutorials: I18N News 3, I18N Blog *new!*

Re: Syntax Highlighting when editing Themes and Components

Very useful plugin! Thanks for sharing it.

Re: Syntax Highlighting when editing Themes and Components

Theme Highlighter version 0.8:

  • Improved parsing - recognizes PHP within HTML tag attributes, CSS and Javascript

  • Highlight GetSimple functions (core and selected plugins)

  • Autocompletion in PHP files - press Ctrl-Space to get suggestions in PHP (some important PHP functions, GetSimple theme functions and public functions of selected plugins)

You can add and/or correct functions (for highlighting and autocompletion) in theme_highlighter/ac_php_*.txt. Standard PHP functions can be found in theme_highlighter/ac_php.txt - it is intentional that only functions important for templates and components are listed.

Please post all additions/corrections in this topic. I will include them in the next release.

I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.

Re: Syntax Highlighting when editing Themes and Components

Theme Highlighter version 0.9:

  • Maximize editor with F11

  • Show CSS color previews on mouse-over

  • Show color picker, when pressing Ctrl-Space on a CSS color

I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.

Re: Syntax Highlighting when editing Themes and Components

The maximizing works, as do the CSS colour previews. However the 'While editing press Ctrl-Space for suggestions, F11 for fullscreen.' message appears on all pages, and no suggestions appear when I press Ctrl-Space.

Tutorials: I18N News 3, I18N Blog *new!*

Re: Syntax Highlighting when editing Themes and Components

Angryboy wrote:

The maximizing works, as do the CSS colour previews. However the 'While editing press Ctrl-Space for suggestions, F11 for fullscreen.' message appears on all pages, and no suggestions appear when I press Ctrl-Space.

Suggestions will only be shown in CSS files and in the CSS and PHP fragments of template files and components.

I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.

Re: Syntax Highlighting when editing Themes and Components

That is what I mean. I tried it when editing my template files and nothing happened. And when I say 'all pages' for that message, I mean literally all back-end pages, from the main 'Pages' page to the 'Settings' page.

Tutorials: I18N News 3, I18N Blog *new!*

Re: Syntax Highlighting when editing Themes and Components

Angryboy wrote:

That is what I mean. I tried it when editing my template files and nothing happened. And when I say 'all pages' for that message, I mean literally all back-end pages, from the main 'Pages' page to the 'Settings' page.

The message is fixed in Theme Highlighter version 0.9.2.

Which browser are you using? I tested on Firefox and Chrome.
Do you get any Javascript errors?
Can you save the page as "Complete web page", zip it and send it to me via PM?

I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.

Re: Syntax Highlighting when editing Themes and Components

Nevermind. I'd been performing the Ctrl-Space input in the wrong place. Works fine xD

Thanks for fixing the page messages now. Everything seems to be in tip-top shape.

Tutorials: I18N News 3, I18N Blog *new!*

Re: Syntax Highlighting when editing Themes and Components

This plugin is awesome.

Can it be extended to the page editor ?

Has anyone tweaked this for fullscreen and syntax in the normal page editor ?

Re: Syntax Highlighting when editing Themes and Components

we use syntax highlighter in the ckeditor at www.get-simple.de

it is working well

you have to install the syntax highlight JS + the syntax highlighter plugin for CKEDITOR

I did not describe that in the wiki because I cannot describe ALL Ckeditor-options ;=)

|--
Die deutsche GetSimple-Webseite: http://www.Get-Simple.de = the german Get-Simple-Website!
Das deutschsprachige GetSimple-(Unter-)Forum:   http://get-simple.info/forum/forum/16/german-deutsch/

Re: Syntax Highlighting when editing Themes and Components

Connie wrote:

we use syntax highlighter in the ckeditor at www.get-simple.de

it is working well

you have to install the syntax highlight JS + the syntax highlighter plugin for CKEDITOR

I did not describe that in the wiki because I cannot describe ALL Ckeditor-options ;=)

Thanks for the suggestion Connie.. I have it implemented in a much more (pointlessly) complicated mannor.

Re: Syntax Highlighting when editing Themes and Components

Connie wrote:

we use syntax highlighter in the ckeditor at www.get-simple.de

it is working well

you have to install the syntax highlight JS + the syntax highlighter plugin for CKEDITOR

I did not describe that in the wiki because I cannot describe ALL Ckeditor-options ;=)

Is there any chance that you could add that to the wiki? I have tried to do what you describe, but so far, I'm not having any success.

Thanks!

Re: Syntax Highlighting when editing Themes and Components

apatheticresistance wrote:

Is there any chance that you could add that to the wiki? I have tried to do what you describe, but so far, I'm not having any success.

Thanks!

There is a chance, but unfortunately I have no time in the moment ;=(

sorry, I will put it on my todo-list

PS: I added it to the WIKI, see here: http://get-simple.info/wiki/how_to:edit … how_to_use

|--
Die deutsche GetSimple-Webseite: http://www.Get-Simple.de = the german Get-Simple-Website!
Das deutschsprachige GetSimple-(Unter-)Forum:   http://get-simple.info/forum/forum/16/german-deutsch/

Re: Syntax Highlighting when editing Themes and Components

Theme Highlighter version 0.9.4:

I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.

Re: Syntax Highlighting when editing Themes and Components

Theme Highlighter version 1.0:

  • compatible with GetSimple 3.1 (beta)

I bumped the version to 1.0, as there have been no bugs reported for a long time.

I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.

Re: Syntax Highlighting when editing Themes and Components

(getsimple 3.1 /  Theme Highlighter plugin 1.0)
In firebug in firefox 3.6.26 displays this error when you install the plugin Theme Highlighter:

CodeMirror.newFoldFunction is not a function
[Stop when the error] var foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder);

theme-edit.php (line 201)

Re: Syntax Highlighting when editing Themes and Components

Superbobo wrote:

(getsimple 3.1 /  Theme Highlighter plugin 1.0)
In firebug in firefox 3.6.26 displays this error when you install the plugin Theme Highlighter:

CodeMirror.newFoldFunction is not a function
[Stop when the error] var foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder);

theme-edit.php (line 201)

I didn't find neither foldFunc nor newFoldFunction in the plugin's code. This must be an error message of Firebug - maybe it's using CodeMirror, too.

I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.

Re: Syntax Highlighting when editing Themes and Components

Would this be due to GS3.1 using codemirror for theme editing, it has foldFunc included...

Currently working on The Matrix Plugin...

Re: Syntax Highlighting when editing Themes and Components

@mvlcek

# comments in php are not coloured as such (brown).
/* ... */ and // however are ok.

E.g. edit Innovation's template.php and see lines 11 and 12.

Or may I have something wrong? Tested plugin version 1.0 with GS 3.0 and 3.1.

Re: Syntax Highlighting when editing Themes and Components

When the HTML editor disabled in GS settings, why Syntax Highlighting not working with page editor?

Post's attachments

hl_gs.png 41.89 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: Syntax Highlighting when editing Themes and Components

This plugin is fully awesome - many thanks.

Only slight niggle is the auto-completion seems less perfect than it might be. If I'm typing CSS, and start with "fon" then hit Ctrl+Space, I rightly get all the possible CSS properties starting with "fon...". However, when I select a suggestion (either with return, space or double mouse click) the suggestion gets added to what I was already typing - eg, "fonfont-variant".

I don't know if there's anything that can be done about this, as I guess it depends on third-party libraries? It seems to make the auto-suggestion thing a bit useless except as a memory-jogger on occasions.

My browser is Chromium 15.

Re: Syntax Highlighting when editing Themes and Components

Theme Highlighter version 1.0.1:

  • recognizes # comments in PHP code (@Carlos)

  • replaces the current word, when a suggestion is suggested (@Mark Nielsen)

@Eugene: the plugin does not work with the page editor, even if the CKEditor is switched off.

I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.