Working with code snippets

Code snippets let you store content for quick reuse. You can create and insert snippets of HTML, JavaScript, CFML, ASP, JSP, and more. Dreamweaver also contains some predefined snippets that you can use as a starting point.

This section describes how to insert, create, edit or delete code snippets. It also describes how to manage your code snippets and share them with other members of your team.

To insert a code snippet:

1. Place the insertion point where you want to insert the code snippet, or select code to wrap a snippet around.
2. In the Snippets panel (Window > Snippets), double-click the snippet.

   You can also right-click (Windows) or Control-click (Macintosh) the snippet, then select Insert from the pop-up menu.

To create a code snippet:

1. In the Snippets panel, click the New Snippet icon at the bottom of the panel.

   The Snippet dialog box appears.

2. Complete the dialog box and click OK.

   For more information, see Setting the Snippets dialog box options.

To edit a code snippet:

• In the Snippets panel, select a snippet and click the Edit Snippet button at the bottom of the panel.

To delete a code snippet:

• In the Snippets panel, select a snippet and click the Remove button at the bottom of the panel.

To create code snippet folders and manage code snippets:

1. In the Snippets panel, click the New Snippet Folder button at the bottom of the panel.
2. Drag snippets to the new folder or other folders, as desired.

To add or edit a keyboard shortcut for a snippet:

1. In the Snippets panel, right-click (Windows) or Control-click (Macintosh) and select Edit Keyboard Shortcuts.

   The Keyboard Shortcuts Editor appears.

2. In the Commands pop-up menu, select Snippets.

   A list of snippets appears.

3. Select a snippet and assign a keyboard shortcut to it.

   For more information, see Customizing keyboard shortcuts.

To share a snippet with other members of your team:

1. Find the file corresponding to the snippet that you want to share in the Configuration/Snippets folder in the Dreamweaver application folder.
2. Copy the snippet file to a shared folder on your computer or a network computer.
3. Have the other members of the team copy the snippet file to their Configuration/Snippets folder.

Setting the Snippets dialog box options

The purpose of this dialog box is to create or edit a code snippet for the Snippets panel.

To create or edit a code snippet:

1. In the Name text box, enter a name for the snippet.

   NOTE

   Snippet names can’t contain characters that are invalid in filenames, such as slashes(/ or \), special characters, or double quotes (").

2. (Optional) In the Description text box, enter a text description of the snippet. This makes it easier for other team members to use the snippet.
3. For Snippet Type, select Wrap Selection or Insert Block.
4. If you chose Wrap Selection, add code to the following text boxes:

   Insert Before Type or paste the code to insert before the current selection.

   Insert After Type or paste the code to insert after the current selection.

   To set default spacing for the blocks, use line breaks; press Enter (Windows) or Return (Macintosh) inside the text boxes.

   NOTE

   Because snippets can be created as start and end blocks, you can use them to surround other tags and content. This is useful for inserting special formatting, links, navigation elements, and script blocks. Simply highlight the content you want to surround, then insert the snippet.

5. If you chose Insert Block, type or paste the code to insert.
6. (Optional) Select a Preview Type: Code or Design.

   If you select Design, then Dreamweaver renders the code and shows it to you in the Preview pane of the Snippets panel. If you select Code, then Dreamweaver shows the code in the Preview pane.

7. Click OK.