By color-coding your tags, you give each type of tag its own unique color to differentiate it from the rest of the document. Color-coding tags makes debugging a document much easier, since you can find things at a glance instead of having to read every line of code. For instance, if you know all image tags are red, you can scan down the code for the color red and easily locate all the image tags.

Here's how to color-code your tags in the HTML Editor.

  1. Go to Tools > Preferences > Customization tab.
  2. Select the type of document whose syntax highlighting you want to modify from the drop-down menu. You can choose from HTML/PHP, Perl, text, or style sheet documents. When you have specified your preferred document, click Modify Highlighting.
  3. In the window that appears, you can select the different elements you'd like to assign special formatting to from the Element list. You can select a foreground and background color, text attributes, and font face, character set, and size. This window also contains a preview window that allows you to see how your color-coded code looks.

Walk-through

  1. Select HTML/PHP Documents from the Customization tab of the Preferences window and click Modify Highlighting.
  2. Select HTML Anchor Tags from the Element list, and change the foreground color to red and the text attribute to bold.
  3. Note how the image tag in the preview area changes to bold red.
  4. Click OK.

You can tweak these settings until you have created a highlighting color scheme that suits you. Typically, you will want tags you modify constantly to stand out so you don't have to hunt them down every time you make a change. On the other hand, some tags, like the comment tag (<!-- -->) may not need to change constantly. In that case, you probably wouldn't want a bright color sticking out at you. (That's why the default color for comment tags is gray.)