Creating a simple coloring scheme - step by step instruction

Syntax coloring allows for better orientation in the code, makes it much clearer. Spider has several dozen coloring schemes (including various configurations of markup and scripting languages, etc. - it supports virtually all popular languages used for the purposes of www and more).

However, there may be times when you need to create a new coloring scheme for a language for which Spider does not provide a scheme, or you wish to change and adapt an existing scheme to your own preferences and tastes. For this purpose, the 'Coloring Scheme Editor' was created.

By default, the 'Coloring Scheme Editor' is available via the Ctrl + Shift + F8 shortcut, as well as from the 'Program Settings' window and from the 'Tools' menu.

The method of creating a new schema will be presented in the simplified coloring for the HTML language.

Preparations for creating a coloring scheme

At the beginning of work, it is best to gather as much information as possible about the language for which the scheme will be created, write down all the keywords.

It will be most convenient if the list of keywords will be a text file, in which each word must be contained on a single line. Individual groups of keywords should be placed in separate files - later it will make the work much easier.

For the sake of simplicity, it is assumed that there will be four groups of HTML keywords, and only a few selected items in each group (so as not to complicate the work at the moment). With more keywords, everything is the same:

• HTML tags: DIV , IMG , A - save to tags.txt file
• tag attributes: CLASS , SRC , HREF - save to attrs.txt file
• JavaScript events: onMouseOver, onClick - save to events.txt file
• entities: &  - save to entities.txt file

Create a new coloring scheme

To create a new coloring scheme, open the editor (by default, the shortcut Ctrl + Shift + F8). If the editor is already open, and you are already editing a scheme in it, use the 'New Coloring Scheme' icon (in the upper left corner).

After creating a new coloring scheme, the basic block named 'Default' is immediately available. It cannot be renamed or deleted. However, you can edit its settings. Successive blocks created when editing the coloring scheme will be nested in this block.

Entering the preview text

<a href="site.php">Link</a>
<div class="classname">Mark i Josh</div>
<img src="img.gif" onMouseOver="mouseover()" onClick="click()">
<!-- Comment -->

Create a plain text coloring style

Plain text is anything that is not otherwise defined in the schema (as a keyword, comment, number, etc.).

In order to create a regular text coloring style, click on the 'Create new style' icon (capital A on a gold background). In the window that appears, enter the name of the style (we will operate with English names - in this case 'Default text', without the quotes), and then, using the available options, specify the background and font color as well as the text style (bold, italic, etc.).

After performing the above-mentioned you can confirm the changes by clicking on 'OK'. If you need to change the coloring style after closing the window, you can do so in the 'Styles' tab in the upper left part of the main Editor window.

Creating the first list of keywords - entity coloring

To create a list of keywords, go to the 'Keywords' tab (above the preview pane on the right) and check the 'Enable keyword coloring' option.

Then click on the plus icon on the right side of the 'Collections' window. In the box that appears, enter the name of the collection ('Entities'). Don't close the pop-up!

The next step is to create an entity coloring style. Click on the icon for creating a new coloring style - same as for regular text.

Then confirm the selection of the collection name and its associated coloring style.

Now is the time to enter some keywords that will be included in the 'Entities' collection. You can enter them one by one by clicking on the 'Add a keyword' icon on the right side of the 'Current keyword set' list (plus icon). However, a much more convenient solution (especially when the set of keywords is rich) is to load it from a text file (the icon and the open workbook). Remember that each word in this file must appear on a separate line! For the 'Entities' set, read the words from the entities.txt file you created earlier.

Changing the settings on the 'Identifiers' tab in order to color the entities correctly

Unfortunately - despite following the above steps correctly, entities do not want to color correctly. The settings on the 'Identifiers' tab are responsible for this.

In order for entities to be colored correctly, it is necessary to define which characters can appear in the colored words. In this case, in the window opened with the 'First symbol' icon, we enter the character &, 'Other symbols' defines the range of other characters that can occur in the entity (we leave the default 0-9A-Z_a-z).

Then specify the suffix (the character at the end of the word) with which the entities will end. Here the suffix is a semicolon ;. To add a suffix, select 'with suffixes' in the Special section and tick the 'with suffixes' option at the bottom of the suffix list. Now click on the 'Add ID' icon and type the ; in the box.

Once you have done this, you can uncheck the 'Enable identifier coloring' option - there is no need to color non-keyword identifiers.

From now on, entities should color themselves according to the settings set in the style.

Creation of a new block, definition of separators - HTML tag construction

In order to be able to color the HTML tag, a new block needs to be created to hold the data needed to color the tag name and content.

To create a block, go to the 'Syntax Blocks' tab (on the left-hand side of the window) and click on the 'Add block' icon (plus icon). In the window that opens, enter a name for the block (in this case 'HTML tag'). If other blocks would already exist in the schema, you can indicate the block in which the new block could be nested.

The first thing to do is to define the block separators in the 'Blocks' tab.

To create a new separator pair, click on the 'Add separators' icon (the plus icon to the right of the 'Block separators' box). These separators will specify the from-whom-to-where settings defined in this block will apply.

At first glance, for HTML markup these could be the characters < (left separator) and > (right separator). However, we will define pairs of separators consisting of characters:

• < + tag name (left), e.g. <DIV
• > right

In the 'Edit Separator' pane there is also an option 'Delimiters are part of block'. Please tick it. This will color the separators according to the rules set in the edited block. If it was unchecked, the separators would be colored according to the rules of the parent block.

Keywords again - tag names, attributes and events

The next step will be to create sets of keywords applicable to the HTML markup construction - 'HTML tags', 'HTML attributes', 'HTML events' (tag names, attribute names, event names). Proceed in the same way as creating a set for entities - create a new set, name it and create a coloring style, type or load a set of keywords from a file.

A minor note here - to make the tag name coloring as correct as possible, the tag names (keywords) must be prefixed with < in the 'HTML tags' set. The list of words would thus look like this:
<DIV
<A

Of course, the keywords for the names of attributes and events will already be given normally, without any preceding characters.

Identifiers - change settings in a tag block

As in the case of entities, the default settings in Identifiers must also be changed in the tag. However, this time the keywords will mostly start with any letter. Therefore, the settings for 'First Symbol' and Other Symbols' will remain the same. Instead, you need to add the prefix '<' that is used in tag names.

To add a prefix, follow the same procedure for adding a suffix for an entity

Enabling symbol coloring - tag closing character >

The < the opening HTML tag is colored correctly (including the tag name). However, the sign >, which marks the end of the tag, remains colored as 'plain text'.

To change this state of affairs, go to the 'Blocks' tab and, after selecting the 'color symbols' option, choose the style for the symbols, which was created for the HTML tags.

Character strings - coloring of attribute values

The schema is almost ready. What is still missing is the coloring of the tag attribute values. This will be implemented in the Character Strings tab.

To enable string coloring, click on 'Enable string coloring' under the 'Strings' tab and then select the 'Multi-line strings' option.

You can now define strings. click on the 'Add string' icon (plus icon). This will open a window where you can add start and end characters for the string. These will be the ' and " characters (for the beginning and end of the string). In the same window you can create a style to be applied to the strings. You can call it 'String'

Creation of a new block for html closing tags

The opening tags are already basically colored correctly. However, the closing tags </DIV> and </A> are not colored.

To enable tag coloring for closing tags create a new block, specify as separators strings built according to the scheme '</+tag name' (left) and '>' (right), for example '<DIV' (left) and '>' (right). When defining separators, you can define symbol coloring in the same tab (as for HTML opening tags)

Then create a keyword set containing closing tags. To do this, go to the 'Keywords' tab. The set in this case will look like this:

• <DIV
• <A

Coloring the set - same as for HTML tags.

On the identifiers tab, create the prefix '</' (follow the same steps as for creating the prefix in the previous block).

There are no attributes, events etc. in the closing tag so you do not need to set them.

Define comment coloring

The last thing to do (according to simplified assumptions) is to do the coloring of the comments.

To define comment coloring, go to the 'Default' block and then to the 'Comments' tab. On this tab, select 'Enable comment coloring' and then 'Multi-line comments'.

You can now define the start and end marks of the comment. To do this, click on the 'Add comment' icon (plus icon) on the right-hand side of the window. In the window that appears, enter for HTML &lt!-- (start) and --> (end). In the same window you can create a new coloring style for comments.

Using the schema in the editor

After saving the coloring scheme, it is immediately available in the editor.