Colorizer Styles



The colors used to highlight HTML and other file types can be changed using HTML-Kit Tools Colorizer Styles.

  • Change colors, font styles, font sizes and font names used by each Colorizer item, such as tags, strings, plain text and more.
  • Keep multiple styles and switch between them on-demand.
  • Add new styles using Colorizer Style plugins.
  • A single Colorizer Style can specify colors for a single, multiple or all colorized file types.
  • Edit and test styles in Colorizer Styles Manager.
Colorizer Style - Default Colorizer Style - Midnight 1

Editing Colorizer Styles

To customize Colorizer styles, open "View > Colorizer > Styles > Edit" from the main menu. Select "MyStyle" from the list of available styles. Make any changes and click "Apply" to test the changes. If a document is open in the editor, it'll be displayed with the updated Colorizer. Finally click "OK" to close the manager dialog.


Colorizer Style attributes

Attribute Short Name Description Example
name n Colorizer item name or element ID. n="attr_value"
foreground f Foreground color f="#000000"
background b Background color b="#ffffff"
fontstyle s Font style. B = bold, I = italic, U = underlined. s="IB"
fontsize - Font size. "+1" increases the current font style by 1. "-2" decreases the font size by 2. fontsize="+3"
fontname - Font name. fontname="Arial"

Colorizer Style structure

Every Colorizer Style file consists of the following structure:

 <type name="html">

   <item name="default" foreground="green" />
   <!-- additional items -->

  <!-- additional groups -->


 <!-- additional types -->


Colors and font styles specified in top items filter down to child items. For example, if a <type> tag specifies a background color of "yellow" all groups and items inside it assume a yellow background color, unless a group or an item specifies its own background color.

<type name="html" background="yellow">

 <!-- items in Group1 have a yellow background,
      except "comment" -->
 <group name="Group1">
  <item name="default" foreground="black" />
  <item name="string_doubleq" foreground="cyan" />
  <item name="comment" f="black" b="green" />

 <!-- items in Group2 have a white background
      and a blue foreground -->
 <group name="Group2" b="white" f="blue">
  <item name="tag" />
  <item name="attr" />


The meaning of the "name" attribute depends on the tag. Inside the "type" tag, the "name" specifies the name of the Colorizer Type. It has to be a known name, such as html, xml or other valid Colorzer Type. The "name" attribute inside "group" tags can be any name as long as it is a unique name that consists of a-z, 0-9 and underline characters. All "item" tags must specify a valid Colorizer Item name such as default, tag and attr (depending on the Colorizer Type). One exception to this rule is that an item tag can set name attribute to "*" (<item name="*" />) to indicate that it overs any items not specifically listed.

The "group" tags are there to make it easier to categorize Colorizer Items. Each "type" tag must have at least one "group" tag. By using multiple "group" tags, it's possible to avoid having to repeat styles that apply to different groups of items.

 <!-- items in GroupA have a white background,
      except "comment" -->
 <group name="GroupA" background="white">
  <item name="default" foreground="black" />
  <item name="string_doubleq" foreground="cyan" />
  <item name="comment" f="black" b="green" />

 <!-- items in GroupB have a yellow background and
      a blue foreground except "entity" -->
 <group name="GroupB" b="yellow" f="blue">
  <item name="tag" />
  <item name="attr" />
  <item name="entity" foreground="olive" />

Additional examples can be viewed in the Colorizer Style Manager and on the plugins page.

RSS newsfeed for HTML-Kit Facebook page on HTML-Kit HTML-Kit on Twitter HTML-Kit Support Channel on YouTube
© 2009 All Rights Reserved.  |  Privacy Statement    
HTML design aid