Using Inline Tools to Enter Code

You have a number of tools to help you easily insert new code and to edit existing code as you type. Each of these tools supports a distinct language element, such as tags, objects, and functions.

You can set the options for these inline tools in the Settings dialog box (F8).

Tag Insight

Tag Insight lets you insert tag names, attributes, and values as you type, after typing a start bracket (<) for a tag.

To enable and configure Tag Insight:

  1. Open Options > Settings > Editor > Tag Insight and select the Enable tag insight and Enable tag insight tag List options.
  2. Set how many seconds Tag Insight waits before displaying a list of options.
  3. To add an item to the drop-down list of options that appears after typing < in the editor: Click Add, type the item, and click OK.
  4. To delete an item from the drop-down list: Click the item in the list and click Delete. It is immediately deleted from the list.
  5. Click Apply.

To view the attributes and values for a tag:

  1. Position the cursor inside the tag and press F2 to open a Tag Tip.
  2. Press the Esc key to close the tip.

To insert a tag with Tag Insight:

  1. Type a start bracket (<) to display a drop-down list of tags.

    Press the Esc key to close a drop-down list.

  2. Scroll down the list, select a tag, and press Enter to insert the tag.
  3. Press the spacebar to display a drop-down list of attributes for the tag; then select an attribute and press Enter.
  4. Press the spacebar again to display a drop-down list of known values for the attribute; then select a value and press Enter.
  5. Repeat the last two steps until you have entered every element for the tag.

To edit a tag using Tag Insight, do any of the following:

Function Insight

Function Insight lets you insert function argument syntax as you type.

To enable and configure Function Insight:

  1. In the Options > Settings > Editor > Function Insight pane, select the Enable function insight option.
  2. Set how many seconds Function Insight waits before displaying a list of options.
  3. To change the list of available functions, modify the Expression Builder definition file. The Expression Builder function library determines the entries in the function list. For more information, see "Customizing the Development Environment".
  4. Click Apply.

To insert arguments using Function Insight:

  1. Type a function name followed by a left parenthesis, (, to display a drop-down list of recognized arguments.
  2. Select an argument from the list and press Enter to insert it.

    Arguments must be separated by commas. If there is more than one possible argument for a function, a comma is automatically inserted after the argument.

  3. To add another argument, press the spacebar after the previous argument and its comma. Select an argument from the list and press Enter to insert it.
  4. Repeat the previous step as needed.
  5. To complete the function call, delete the comma after the last argument (if applicable), and add a closing right parenthesis, ).

Tag Completion

When Tag Completion is turned on, the end tag is automatically inserted after you finish typing the start tag.

You can set options for this feature in the Options > Settings > Editor > Tag Completion pane.

The default tag completion set does not include every container tag necessary for coding in XHTML; for example, it does not include < />.

Auto Completion

Auto Completion completes a code block by inserting the appropriate code when you type the opening code fragment (trigger string).

You can set options for this feature in the Options > Settings > Editor > Auto Completion pane.

Only a few strings are listed by default; for example, to insert --> after you type <!-- for a code comment. You can also specify the cursor position after insertion; for example, before --> in the previous example of the code comment. You can insert any user-defined string, even blocks of text or code; however, you might want to use code templates for whole blocks of text and code snippets for whole blocks of code.

Code Templates

A code template provides a shortcut for entering static text blocks. As with Auto Completion, this feature is intended for user-defined strings.

To define a code template:

  1. Open Options > Settings > Editor > Code Templates.
  2. In the Code Templates pane, click Add.
  3. In the Add Code Template dialog box, type a keyword, a description of the code template, and a value to be inserted in place of the keyword. Click OK.

    For example, you could enter dt4 for the keyword, HTML 4.0 Doctype for the description, and for the value, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">.

    If the value includes a tab, it is inserted as an HomeSiteASCII #9 character, unless the Options > Settings > Editor > Insert tabs as spaces option is selected.

  4. The code template displays in the list. Click Apply to save your changes.

To edit a code template:

  1. Open Options > Settings > Editor > Code Templates.
  2. In the Code Templates pane, click Edit.
  3. In the Edit Code Template dialog box, change values as needed and click OK.
  4. Click Apply to save your changes.

To insert code template text:

  1. Type the keyword.
  2. Press Ctrl+J to expand the text.

For example, the keyword dt4 expands to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">.

Extended and special characters

To enter special characters and Latin-1 extended characters, you can either type the HomeSiteASCII code or select the character from the list available in View > Extended and Special Characters.

If you need to change the character to its entity name, select Options > Settings > Editor > Automatically convert extended characters. This converts characters above ASCII 127 to entity names so that they will be properly rendered in browsers.

Comments