ActiveState Community
Navigation
RSS Feeds
Changing HTML script colors
Posted by Kronuz
on 2007-07-10 00:59
OS: Windows Vista
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.
- Login to post comments
You can create our own color schemes in Komodo at
Preferences / Fonts and Colors
Colors can be set both globally and per-language.
--
JeffG
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>Code like the above sample is actually treated like a PHP file, or should be.
--
JeffG
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.
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
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.
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.
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.
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.
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).
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.
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
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
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.