I'm using NetBeans 12 and I hate the fact that it highlights all instances of classnames in HTML and leaves them highlighted with no apparent way to remove the highlighting until another classname/id is selected.
I have searched for answers, and a common one is to use Tools > Options > Editor > Highlighting and deselect "mark occurrences of symbol under carat." I think that is for a different problem though, and for some reason the only language in the dropdown is PHP, so I can't uncheck this for HTML anyway.
Please tell me how I can stop this annoying behaviour, or at least use a keyboard shortcut to remove the highlighting. I would have though something like ESC would be set up to do this as default, but no...
Go to Tools > Options > Fonts & Colors
There you will see a drop-down list of different style profiles. In my case, I have "FlatLaf Light" selected. Yours may be different, but that should not matter.
Choose the "Syntax" sub-menu.
In the "language" list choose "HTML"
In the "Category" list, scroll down to "CSS embedded in HTML" and then select it.
Change the "Background" color to "Inherited".
Hit "Apply" to save your changes.
In my case, this looks as follows:
Before the change:
After the change:
This changes the (very specific) highlighting issue shown in your question's screenshot. But you may want to make a similar change in other places... For example, you can see the opening and closing (matching) <ul> tags are highlighted (which I find useful).
So, you can also take a look at other languages - and even the "All Languages" option for a broader range of places where similar changes can be made (e.g "Mark Occurrences"). But I have not investigated these in any detail.
Final notes - all subjective and based on personal preferences...
You may choose to keep the highlighting feature, but to use a less intrusive color, of course, instead of completely removing it.
I am using NetBeans 15 - so that may affect which overall look and feel themes you have available, also. But a different theme (retaining the highlighting) may also be another option.
Related
Notepad++ does not highlight autofocus as red like it does to the others attributes.
Is that the intended behavior, am I doing something wrong, or is it a bug?I don't suppose it's possible to just add the keyword myself, right?Let me know if there's anyway to fix this problem.
Notepad++ has its own idea of the syntax of HTML. This may vary by Notepad++ version; the current version (7.3.2) does not seem to recognize contenteditable and spellcheck either – they are, like autofocus, shown in the settings for ATTRIBUTEUNKNOWN. If you like, you can use the Style Configurator (in the Settings menu) to set that rendering to the same as for ATTRIBUTE, but then you would also see e.g. attributes conteteditable and foobar in that color, too.
There does not seem to be any way to change the set of recognized attributes except by editing the source of Notepad++. In the Language menu, there is the option “Define your language”, but it is far from obvious how to use it to define your own version of HTML. It seems that the formalisms used are limited, since Notepad++ seems to show e.g. the tag <action> in the color for recognized tags, probably because action is a valid attribute name and the Notepad++ definitions for HTML have a list of keywords, including both tag and attribute names.
So don’t take the syntax highlighting and coloring in Notepad++ too seriously. It usually helps, but it’s far from perfect and should not be taken as a criterion for syntactic correctness.
I just upgraded to Sublime Text 3.
I'm using my existing Color scheme from Sublime Text 2. But now multi language code highlighting no longer works.
Sublime Text 3
Sublime Text 2
Can someone help me comeup with the custom scope for my tmTheme.
Congratulations on upgrading, it was a good choice. I'm using ST3 Build 3120, the latest development build, so the language definitions may have changed somewhat, but not significantly, if you're using the public beta Build 3114. I also use the Neon Color Scheme (full disclosure: I'm the developer), which has a very large number of specific scopes compared to some other color schemes like Monokai or Solarized which reuse the same colors for a variety of different language features. Finally, since I'm a color scheme designer, I use tools like ScopeHunter and ScopeAlways to determine which scopes and theming elements are active at any point in the text.
So, here's a screencap of your code plus a couple of other test lines using Sublime's HTML syntax:
and here is the same code, moments later, captured using the PHP syntax:
What we can see is that, in the lower left corner, ScopeAlways is indicating that, at the position of the cursor, the base scope of the HTML file is text.html.basic, while the PHP one is embedding.php text.html.basic. So far, so good - this is normal. More importantly, however, we can see the obvious difference in highlighting between HTML and PHP, including the contents of the id attribute as compared to the other attributes, and the coloring (or lack thereof) of the embedded PHP code (yes, I know I'm missing a ; at the end of the isolated PHP code at the bottom - adding one in doesn't change anything).
So, my first suggestion would be, if you're not already using it, is to set the syntax of the file to PHP. You can either select from the menu on the far right side of the bottom bar, or by selecting View → Syntax → and choosing from the options available.
If you're already using the PHP syntax, you should know that since the beginning of this year (more or less), many of Sublime's language description syntax files have been significantly or completely rewritten, PHP and HTML among them. They were in sore need of modernization and speed-up in some cases, and with the advent of the sublime-syntax format (much more powerful than the old, but still supported, tmLanguage format), a better regex engine for .sublime-syntax files, and the hiring by Sublime HQ of Will Bond (of Package Control fame) to do a lot of things that Jon Skinner (Sublime's author) didn't have time or interest in doing, the development process of both Sublime itself as well as the syntax definitions (which were open-sourced at the same time) has increased substantially. That is a really long-winded way of saying that a lot of stuff has changed in a relatively short amount of time, and color schemes that were written with the old versions of the HTML and PHP syntaxes in mind may not be perfect for the new versions. So, you may want to either go through the new syntaxes and update your color scheme, if you're that kind of person, or you can try some other schemes like Neon, which have already been through that process.
Getting back to that weird id highlighting - I'm going to release a new version of Neon fairly soon that fixes that issue, and colors the contents of the id attribute just like class or any other attribute. I'll also try and find out why they did that.
I hope this helps. Good luck!
I've just opened my first Ionic based mobile project, and the HTML templates are really full of Ionic tags, like <ion-modal-view>, which courtesy, ReSharper (I deeply suspect), has a wavy blue underline, as do half the other tags in the template. I deplore working with these lines on the screen, as they indicate there is something wrong (OK, maybe for the W3C it is wrong), when there is nothing wrong. Can, and how, I get rid of these damned blue lines?
Well I'm a big believer in writing valid html. Standards are there for a reason, and we can't complain about Microsoft not following them with IE if we don't follow them ourselves.
I did some searching and couldn't find any information on whether Ionic could be written as valid html.
So personally were I in your position I'd either consider whether writing an XHTML DTD that supported Ionic's mark-up was an option, or chose a framework that I could write valid mark-up in.
Since I'm guessing neither of those is an option you could go to:
Resharper -> Options -> Code Inspection -> Settings
Look for the section under the heading Elements to skip -
Either find File masks and add *.html (or whatever other file extension you might be using) or find Files and folders and mark the specific files/folders that you don't want Resharper to look at.
I want to suggest a better alternative.
Instead of skipping inspections of all *.html files it should be possible to just ignore the inspection for Unknown Tags:
I just downloaded Aptana (v3.0.4) and I'm really liking it, much better for coding than Dreamweaver. The big problem I've found so far is that I can't get the HTML highlighting to work properly.
For example, I go to the Theme selector and choose one theme (in this case the Dreamweaver theme, since I'm already used to those colors). It works fine for php, javascript, css... but for HTML. It won't give different colors to the different html tags (like "a", "img", "form", etc). If I look at the colors palette, I can see that those tags have different colors assigned, but no matter what color they have in the palette, they take the color of the "html meta" element in the palette. So basically, ALL the tags have the same color, which is annoying.
Is there any way to fix this? I've even created a new theme copying the Dreamweaver one to make modifications, but still the same...
EDIT
It seems that this might have something to do with Scopes. The coloring rules work assigning a color to a certain scope (each coding element has one scope linked to it). In the colors palette, each of the html tags ("a","img",etc) has a different scope linked to it. However, if I use the Show Scope tool that Aptana has, all those elements show the same scope: text.html.basic meta.tag.block.any.html entity.name.tag.inline.any.html, instead of showing a different one each one. So since they all have the same scope, using the them editor you can't choose a different color for each one... Is there any other way to do it? Is it possible to change the assigned scope of an element?
These operations behave similar to CSS Selectors.
GO => entity.name.tag.inline.(form, img, p, etc.).html.
(1) OPEN the Preferences Theme Panel.
(2) ADD (+) a NEW element.
(3) SELECT your desired STYLES.
(4) PASTE your desired scope selector, e.g., "entity.name.tag.inline.form.html" INTO the Scope Selector FIELD… and CLICK 'Apply'.
(5) PRESTO CHANGE-O!
All HTML tags currently have the same scope, so you can't (yet) do what you are asking. But please file a feature request so it can be added to the list.
maybe check the default editor for html files in aptana?
Anyway, my aptana had always the same color for each tag.
Of course we can use tools like Firebug to highlight portions of HTML and see what all CSS is being applied.
But what about the reverse? Is there some kind of tool which would allow you to highlight a particular CSS rule and show you all the pages on a site (either static HTML pages or their dynamic templates) that it applies to?
Example: I've come to work on a new site, very large and I need to edit CSS on a particular page but in doing so, I have no idea how many other pages on the site might also have these class names and hence be affected. Of course I can try to search the whole site for the class name(s) but this can be time consuming or tricky. This site has a class named "ba" for example. Guess how many irrelevant pages will turn up if I just search for "ba"? So how about including a double quote ("ba)? Well, it could be in the middle of a few other classes (class="hz ba top"), at the end (class="hz ba"), etc. More so, it could be dynamically plugged in via server side code making it even harder to find. A tool that could somehow spider your site and be able to identify all the places your CSS change will affect would be great.
not exactly that, but there is a firebug plugin that does that for any loaded page:
http://robertnyman.com/firefinder/
You could use regular expressions ..
for example in Dreamweaver on the search dialog box :
select 'Find in: Entire current local site.."
select 'Search: Source code'
check 'Use regular expression'
in the find textarea type class\s*?=\s*?".*?content.*?"
click 'find all'
the same regular expression could be used with other software that can search inside files using regular expressions....
for example : http://www.sowsoft.com/search.htm (not affiliated with them, just found it for here..)
Keep in mind though, that all the suggestions here do not take into account the case where the class is added by script..
If you use a Mac, there's an excellent shareware app called "CSSEdit" by an Indy Mac Shop in Belgium. A single-user license is 30 euros. I've used it for approx. three years and i can recommend it highly. It's a mature, stable App (though continuously updated/improved); widely used among Mac Web Designers, and those of use who are not but need all the help we can get, which CSSEdit certainly seems to provide.
To show elements on the html page styled by a given selector:
(i) open both the style sheet and the markup page (markup page must have a link to the style sheet);
(ii) click the X-Ray button off (must read 'Not Active' below the button);
(iii) in the style editor, click any selector (i click it so that my cursor is at the left margin, e.g., in front of the '#', etc.);
(iv) now click 'inspector' on the mark-up page (next to 'X-ray').
Now, look at your mark-up page--it will have a blue outline around the elements affect by the style you clicked on in step (iii) above.
For this kind of things I just use grep, or - even better, ack.
If you're concerned about false positive when searching for short patterns, you can do a double filter: you grep all lines containing class= and you feed its output in another grep which only narrows the result down to the lines containing both class= and your search pattern (which can also be more precisely specified with a regexp using word boundaries like \bba\b to avoid matching bar or abba)
How about putting an ID on the body of each page, and use that to restrain the use of CSS outside of pages clearly stated in the CSS?
Like this:
#mypage .description,
#myotherpage . description {
}
Cons:
Must put a body ID on each page / template.
Must specify each page the CSS should apply to. More CSS code to manage.
Makes the CSS less easy to scan through with your eyes (since the line starts with the page ID and not the CSS style). This is a bigger problem if some of the CSS styles are used on several pages (since the css spec for each style would be long).
Pros:
Avoids unintentioned CSS change propagations. I.e. changing one page affects other unknown pages.
See what pages a CSS change would affect, when you're editing the CSS style itself. The information is right there; no need to search/grep for it.
Forces developers to specify what pages the CSS would affect. If you'd just included this information as comments in your CSS, some person would inevitably forget to update the comment when the CSS is used on a new page.
I agree with this statement, made by a friend:
"Minimize CSS that is used several places. It's not like programming; it's better with a little duplicate CSS, than unmanageable CSS. (Pages like apple.com, has own stylesheets for
each page, and some global CSS.)"
- Olav Bjørkøy, original creator of the Blueprint CSS framework
I'd love your input on this, or if any of you have found a better way.