Code Snippets

 

Code snippets under Expression Web represents small text fragments, that can be inserted into the code views of several documents (like HTML, CSS, ...). Unfortunately code snippets can not be inserted on design view of HTML documents.

Frontbox code snippets provide a little bit more function:

  • usable in design view
  • beside global code snippets (usable in all webs) Frontbox supports web specific code snippets
  • the behavior can be controlled by placeholders (e.g. to add content of the clipboard)

Using

Toolbar code snippetsCode Snippets

If installed, Frontbox creates a new toolbar that shows a combo box for the defined code snippets, and two buttons to insert selected code snippet into current page and to manage the list of defined snippets.

The screen shot shows as an example the code snippets I'm using every day.

Create a new code snippet

After click on "Add" you can create a new code snippet and add it to the list.

You can decide whether your new snippet should be available global or only for current opened web. If no web is opened you can create only global code snippets.

If you like you can add the snippet to an existing group or you can create a new group. To create a snippet without group leave this field empty.

Next you should define a self-explanatory name - that's the name that will be displayed within the toolbox.

Last you can define the code of the snippet. This can be code for HTML, CSS, JavaScript or whatever you want.

Sample: Hello World!

This first example demonstrates the creation of a new code snippet that inserts "Hello, World!" into current opened page. Add a new snippet and define it as shown at the right hand side.

Click on OK and the snippet is saved and available within code snippet's toolbar. Select this one and click on the button aside the list to add the code to an opened or newly created page.

Hello, |World|!

You wonder about the vertical lines? Go on reading.

Insertion points

Using one or two vertical lines inside your code definition you have control over cursor position after insert and how current selected text will be integrated. A few samples:

Code Selection in document Result
<h1>Hello, |!<h1> (nothing) Hello, |!
<h1>Hello, |!<h1> you Hello, you!
<h1>Hello, |World|!<h1> (nothing) Hello, |World|!
<h1>Hello, |World|!<h1> you Hello, you!

Conclusion: in case nothing was selected, the area defined by one or two vertical lines is selected after insert. If you go on typing this selection will be directly overwritten. Otherwise, if something was selected, this selection replaces the insertion point(s) and the cursor is placed behind the inserted code.