ActiveState Community Site - Changing HTML script colors - Comments

Settings which have no effect or are meaningless

Laisvunas — Sat, 23 Feb 2008 03:04:32 -0800

ericp

The challenge is in coming up with a design that works in the Komodo
architecture, and is easy to manipulate in the UI.

It would be good at first to have UI cleaned from all settings which have no effect or are meaningless. For example, it seems that from all Lang-Specific settings for HTML only settings for tags and attribute names have effect. So why to have another 18 (!) options ?

Its really confusing to try to set color preferences when only 2 settings out of 20 are functioning.

Thinking out loud on the subject...

ericp — Thu, 21 Feb 2008 14:32:04 -0800

I'm going to address points 1 through 7, referencing existing or new
bugs as I go. These are great points.

1. "Language-specific" settings sometimes have no effect, or are meaningless.

The issue is that the editor colors each character in the buffer with an
abstract style number. We then map (document language, style number) to
a style name ("variable", "attribute name", "string"), and then use the
preferences to assign each case of (document language, style name) to a set
of visible styles (foreground color, background color, italic, etc.). We
need to bring sublanguages into the picture. For example, HTML documents
can contain sublanguages like "Markup", JavaScript, and CSS.

2. Assigning different tags different colors isn't possible.

This also requires some design. All the multi-part language colorizers
are currently described in UDL. Due to old limitations in the Scintilla
editor, we could only use 56 different styles to represent all combinations
of (sublanguage x style). With advances in Scintilla, we will be able to
use 248 styles, which means there is now enough room to color some element
names differently, distinguish "!important" from other CSS style values, etc.
The challenge is in coming up with a design that works in the Komodo
architecture, and is easy to manipulate in the UI.

3. The bug here is that HTML attribute values are mapped to the style name
of "string". There's an easy fix, which will break autocompletion in
languages like RHTML, and a hard fix, which is discussed at
http://bugs.activestate.com/show_bug.cgi?id=75047

4. "Sometimes colors change."

Could you give a reproducible example? Or is it random?

5. The sample code changes colors, the source code doesn't:

Again, a repro would help.

6. "Nonsense syntax type". The "keywords2" type is supported by
Scintilla for Python, the C/C++/C#/Java family, and Lua, but we
don't use it here. It should die. http://bugs.activestate.com/show_bug.cgi?id=75048

7. "File association syntax colouring doesn't always stick. "

Did you press "Add" after you specified the new Pattern and Language,
and before pressing "OK"? If not, the mapping isn't saved.

Bug http://bugs.activestate.com/show_bug.cgi?id=75053

Inconsistent

andremolnar — Thu, 21 Feb 2008 13:22:46 -0800

Inconsistent.

4. Sometimes colours change. Other times they do not.
5. Sometimes the example text shows a selected colour change - but the source code never changes.
6. Nonsense syntax type - Keywords2?!?! - which are the '2' kind of keywords?
7. File association syntax colouring doesn't always stick. Since this is a Drupal site you must appreciate that I would like *.module files to be treated as PHP. Even after changing the file association *.module files seem to have a mind of their own when it comes to colouring.

andre

Three problems with syntax coloring in Komodo

Laisvunas — Wed, 20 Feb 2008 13:03:17 -0800

Basic interface for setting syntax colors in Komodo is quite elegant, but because of some details (and maybe bugs) resultant usability is poor.

I see three problems with current state of syntax coloring.

1. It is difficult to make sense of many options. For example, what might Lang-specific option to set coloring for variables in HTML mean? Setting such option does not change anything in example you find above the form.

2. Many options you might expect to find are not present. For example, there is no possibility to set coloring for CSS selectors, for CSS !important, for different coloring of HTML anchor, form and table tags.

3. Setting Lang-specific coloring does not override coloring which was set as Common syntax coloring even in single language documents. For example, if I set as Common syntax preference that strings should be colored green, then HTML attribute values, since they are between double quotes, are also colored green, and setting as Lang-specific option that HTML attribute values should be colored blue, has no effect at all. May be this behavior is a bug?

Effect of these problems is this: syntax coloring in Komodo neither works out of the box nor it is possible using graphical interface to set it according your preferences. It is big contrast with such editors as PSPad or Dreamweaver in which you have both.

another editor example

mtcsw — Tue, 19 Feb 2008 13:46:40 -0800

Though it is not a true IDE, TextMate on the Mac does a background coloring to show when an html page has javascript or php (for example).

We considered this long ago, backed out due to complex UI

ericp — Tue, 19 Feb 2008 13:37:42 -0800

Clearly it's time to have a look at how many other tools
are supporting this, and implement multi-language
coloring for Komodo.

You can follow the bug at
http://bugs.activestate.com/show_bug.cgi?id=70949

The bug references this discussion as well.

More flexibility in editing HTML syntax color scheme

Laisvunas — Tue, 19 Feb 2008 03:31:54 -0800

It would be handy if there were more flexibility in editing HTML syntax color scheme. In Komodo it is possible only to set fore and background colors for HTML tags; it is not possible to color different tags in different colors or to color symbols <, /, > in one color and tag names such as "a", "div", "table" in another color.

In Komodo there is no way to reproduce Dreamweaver's HTML syntax coloring (I think it is excellent). In Dreamweaver it is possible to set different fore and background colors for:

anchor tags

table tags

form tags

image tags

style tags

script tags

object tags

HTML special characters

HTML comments

HTML attributes

HTML attribute values

HTML text

CSS selectors (there is no way to do this in Komodo!)

CSS values

CSS strings

CSS !important

CSS properties

CSS comments

CSS import

CSS media

JS brackets

JS comments

JS function keyword

JS keywords

JS reserved words

JS strings

JS regex

I think that a good interface for editing color schemes should give flexibility analogous to Dreamweaver's.

Check out PSPad Editor's HTML multihighlighter

Laisvunas — Mon, 18 Feb 2008 06:23:51 -0800

PSPad Editor does a good job at syntax coloring of multi-language documents. In this editor you can choose to highlight a document simply as HTML or using HTML multihighlighter. If the last option was chosen then CSS, javascript and HTML sections of the document are colored according preferences set for those languages.

It would be nice to have in Komodo something analogous to PSPad's HTML multihighlighter.

Any progress on this?

mtcsw — Wed, 13 Feb 2008 17:20:59 -0800

I too am new to Komodo and am enjoying having a decent IDE to work in again. I would like to second this suggestion for background color options for languages within a file. I frequently have javascript, php, and html on the same page and having the ability to color the background of a language would make it much easier to scan a page and quickly find what you're looking for.

I went to look at the bug report, but do not see any action taken or response given from Komodo.

Time to revisit this

ericp — Wed, 11 Jul 2007 10:28:02 -0700

Definitely, Scite does a good job of coloring multi-language documents.

The problem is that it's configured by editing a large document full of
numbers indicating the internal style values and colors. We expect
that most people expect better than that kind of method of configuring
an IDE. We explored this area several years ago (Komodo 2 if memory
serves), and gave up because it was too complicated. Now that we're
building more support for multi-language documents it's time to
revisit it.

I've logged a bug at
http://bugs.activestate.com/show_bug.cgi?id=70949

Check out how SciTE does it

Kronuz — Tue, 10 Jul 2007 20:05:12 -0700

JeffG,

I've checked the PHP, the JavaScript and the HTML syntax highlight and coloring, and I've found that the coloring syntax scheme is always set by the file's extension; for instance in a .html extension, Komodo is always treating everything as HTML, it's not changing the language for neither the block nor the <?php ?> block; it always uses HTML for coloring everything.

As an example, I went to the PHP coloring and changed the default's background color to red, then I went to the JavaScript syntax coloring and changed the default's background to blue, I left the HTML's default background color white. Next I pasted the above code in a new .html file and in a new .php file, as a result, in the .html file, the whole thing had a white background, whilst in the .php file everything had a red background color. The thing is both the .html and the .php should be shown exactly in the same way: the HTML portion of the code should have a white background, the JavaScript portion should have a blue background and the PHP block should have a red background... Now, if I open a .js file and add stuff to it, that sure should have everything in a blue background as there are no "blocks" in JavaScript. The described problem also applies to the CSS blocks and maybe to other things in also other languages...

Also, it a related issue, I think it should be possible to set different font faces to the different elements of a language syntax, like for instance, I'd like to set a proportional font to all that is not a tag in HTML (not to the stuff inside blocks like CSS, PHP or JavaScript, those blocks should be handled by its own language syntax style), and a fixed type to the tags and other stuff.

I understand you're using Scintilla for syntax highlight so I guess all this I'm asking is not impossible nor too difficult to do with the Scintilla engine working underneath. Please, check the SciTE website (http://www.scintilla.org/SciTE.html) and get SciTE (currently on version 1.74) (windows version is a single executable file, only around 500K). Then try pasting and saving as either .php of .html (doesn't matter) the following snippet for a nice looking example of what I mean Komodo should work:

<html>
    <head>
        <script type="text/javascript">
            // some JavaScript code, but still with the default colors for JavaScript
            var func = function() {
            alert("Help!");
            };
        </script>
        <style  type="text/css">
            /* even SciTE gets this is wrong, CSS block should be shown 
                correctly here (with CSS coloring), but they show as just regular text: */
            body {
                background: black;
                color: #80c0c0;
            }
        </style>
    </head>
    <body>
        <?php
            // some PHP code, but using the PHP syntax colors
            $str =<<<EOC
                Check the heredoc working here
EOC;
            echo $str;
        ?>
        This text is shown with proportional font face as 
        it's not a tag nor part of a block in other language.
    </body>
<html>

That's what's possible to do and I really think it looks amazing (check how the heredoc in PHP also works as it should, unfortunately for SciTE the CSS block is not having the right colors in it either, they must have missed that one.)

I hope you can figure this out, SciTE almost has it working properly and it'd be a big step forward if you could fix it to work at least that way too...

By the way, I almost forgot to mention I've also tried all this in Komodo 4.2 beta.

Congrats to your programmers and your development team (and the marketing team, it's a very smart move to have the editor free), Komodo is an excellent program, it easily beats all the competition big time already (and I sure have tried them all.) Keep up the good work :)

Best regards,
Kronuz.

That's a PHP file

jeffg — Tue, 10 Jul 2007 16:56:45 -0700

Code like the above sample is actually treated like a PHP file, or should be.

--
JeffG

Yes, I tried that, but still

Kronuz — Tue, 10 Jul 2007 11:23:00 -0700

Yes, I tried that, but still that doesn't change the colors of the languages embedded in other languages... such as for HTML (after changing both PHP and Javascript colors as you said, in a per-language basis):

<html>
    <head>
        <script>
            // some JavaScript code, but still with the default colors for JavaScript
            // (not my new defines for the JavaScript language)
        </script>
    </head>
    <body>
        <?php
            // some PHP code, but still with the default colors
        ?>
    </body>
<html>

Sure

jeffg — Tue, 10 Jul 2007 10:21:20 -0700

You can create our own color schemes in Komodo at

Preferences / Fonts and Colors

Colors can be set both globally and per-language.

--
JeffG

Changing HTML script colors

Kronuz — Tue, 10 Jul 2007 00:59:05 -0700

Is it possible to change the JavaScript, the PHP, and other scripting languages inside the HTML? Like for instance, what I want is to use a different background color for the JavaScript and PHP in my HTML code.

Regards,
Kronuz.