HTML

• From the main menu, select File | New Scratch File, and then select HTML File from the list.

1. Select the code fragment to wrap and press ⌃ ⌥ T or select Code | Surround With from the main menu.

2. From the list, select Wrap with Tag. AppCode encloses the selection in a pair of brackets (<> and </>).

3. Type the tag inside the opening brackets <>. AppCode automatically fills in the tag in the closing brackets </>.

   

   Gif

View documentation for a tag or an attribute

• Position the caret at the tag or the attribute and press ⌃ Q or select View | Quick Documentation Lookup from the main menu.

• When you hover the mouse pointer over a tag or an attribute, AppCode immediately displays the reference for it in the Documentation popup.

  You can turn off this behavior or configure the popup to appear faster or slower, see Configuring the behavior of Documentation popup below.

Configure the behavior of Documentation popup

• To turn off showing documentation automatically, open the Preferences dialog ⌃ ⌥ S, go to Editor | Code Editing, and clear the Show quick documentation on hover checkbox.

• To have the Documentation popup shown faster or slower, open the Preferences dialog ⌃ ⌥ S, go to Editor | General | Code Completion, then select the Show the documentation popup checkbox and specify the delay time.

Open the MDN documentation for tags and attributes in the browser

• In the Documentation popup ⌃ Q, click the link at the bottom.

• Press ⇧ F1 or select View | External Documentation from the main menu.

1. Press ⌃ ⇧ A and select Open Source Code from URL... from the list.

2. In the Open URL dialog that opens, type the URL address of the web page or choose a previously opened URL from the list.

View images in AppCode

• Select the image file in the Project tool window and press F4.

• Alternatively, position the caret at the reference to the image in the editor and press ⌃ B

• To preview an image in a popup instead of in a separate tab, select the reference to it and press ⌃ ⇧ I

View images in an external editor

• Select the image file in the Project tool window, and select Jump to external editor or press ⌃ ⌥ F4.

  AppCode opens the image in the editor that is used in your OS by default. You can configure another image editor in which the IDE will open files.

Change the default external editor

1. Right-click an image in the editor and select Edit Path to External Editor from the context menu.

   You can also press ⌃ ⇧ A and type Edit Path to External Editor.

2. In the Path to External Editor dialog, specify the path to the application in which you want to open images and click Save.

   

1. In the editor, select the code block to be extracted and choose Refactor | Extract | Extract Include File from the main menu or from the context menu of the selection.

2. In the Extract Include File dialog that opens, specify the name of the include file without the extension and the directory to store it in. You can accept the predefined directory or select another one.

3. Click OK, when ready. AppCode extracts the selected source code into the specified file in the target directory and generates the corresponding reference in the source file.

1. In the Preferences dialog ⌃ ⌥ S, go to Editor | Color Scheme | HTML.

2. Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in Colors and fonts.