HTML

CodeLobster IDE brings powerful support for HTML 5 and CSS 3 that includes syntax and error highlighting, formatting according to the code style, code completion, on-the-fly preview during a Live View session.

For comfortable work with HTML documents, you can use the following functions:

HTML syntax highlighting

CodeLobster IDE supports syntax highlighting in the Editor to make it easier to read the semantics of the structured content by displaying each type of code in different colors and fonts.

To customize the colors or styles used for the syntax highlighting colors for HTML/XML files, follow these steps:

  1. Open the Preferences dialog box (Tools | Preferences...).

  2. Go to Editor | Colors.

  3. In the Show settings for: component select XML/HTML item and customize the colors or styles using the selectors to the right of the pane.

Highlight matching tag

CodeLobster IDE highlight matching opening or closing tags. Enclosing tags are highlighted in pairs when a cursor is placed between the beginning and ending enclosing characters.

This feature helps to navigate and check code for errors, as it highlights mismatched enclosing characters with a different color that you can change in the Preferences | Edit menu.

Intelligent autocomplete

The Intellisense autocomplete for HTML feature helps write code faster. The completion list is called automatically in the target area of your code within whatever tag in the code. It is invoked automatically in the relevant code area and lists possible options for completion of the current element.

Intelligent HTML autocomplete support includes:

  1. HTML tags

  2. Tag attributes

  3. Property values

[Note]Note

If you place caret behind the incomplete name of a tag/attribute/value and there's only one choice for its completion, it won't appear but this tag/attribute/value name will be completed automatically.

For example, place caret after "t" symbol in the following string: <ht and press Ctrl + Space. No list will appear, but the string will turn to: <html

HTML navigation with holding Ctrl button

The Editor offers fast navigation with clickable hyperlinks to files in your code. Holding down Ctrl and left clicking a link to open a file in the Editor:

or system application:

Image tooltips

HTML tooltips show image preview, it dimension, and size in pixels.

Code collapsing

You can fold or unfold any manually selected regions in code. CodeLobster IDE folds or unfolds the current code fragment, for example, a single method. Folded code fragments are shown as a shaded box ( ).

To fold a code fragment:

  • Select Edit | Code Collapsing | Collapse Block (Ctrl + Num + -) main menu item or move the mouse over the gutter and click -.

To unfold a code fragment:

  • Select Edit | Code Collapsing | Collapse Block (Ctrl + Num + +) main menu item or move the cursor over the gutter and click +.

CodeLobster IDE collapses or expands all fragments within the selection, or, if nothing is selected, all fragments in the current file.

  • To collapse or expand all code fragments, select Edit | Code Collapsing | Collapse All Blocks main menu item (Ctrl + Shift + -) or Edit | Code Collapsing | Expand All Blocks (Ctrl + Shift + +) item.

When you hover cursor to folded fragment you see a code preview tooltip:

[Note]Note

See more about Code collapsing

Commenting code

CodeLobster IDE comments the lines on depending on the syntax of the selected code (<! –– HTML ––>, /* CSS */, and so on).

  • To comment on a line of code, place the caret at the appropriate line and press Alt + C or select Edit | Comment line main menu item.

    Also, you can Comment Line by Line pressing Alt + X or select Edit | Comment lines by the line main menu item.

  • To uncomment selected fragment of code, use Alt + U shortcut or select Edit | Uncomment lines main menu item.

If you need to undo or redo your changes, press Ctrl + Z (Ctrl + Shift + Z) respectively.

[Note]Note

See more about Comment lines

HTML Context and Dynamic Help

The Dynamic Help window displays links to help topics for the target element. You can get the necessary information on any element of HTML code.

To get help topics using Dynamic Help:

  • Place the pointer on the target element and press the F1 button.

  • Select Help | Context Help main menu item.

  • Click the topic item in the Dynamic Help window.

    [Tip]Tip

    To show Dynamic Help select View | Panels | Dynamic Help main menu item.

By default, the free HTML editor performs a search on the http://www.w3.org site. You can change the help site address to https://www.mozilla.org/:

  1. Select Tools | Preferences main menu item.

  2. On the left panel click Context Help item and select HTML

  3. On the right panel select help site.