Expression Web Resource by Data Insite

V4 SP2 Snippets



See also Installing SP2 Snippet Collections,  Basic JQuery Snippets

 , JQuery UI Snippets and Mobile Snippets

Expression Web V4 SP2 has a much-improved way of working with snippets, those small bits of code you can save and re-use.

Rather than using Ctrl-Enter to open the snippets dialog, as you have been able to do since V2, SP2 now uses a 'snippets panel'. You can still open this with Ctrl-Enter but you can also have it floating or dock it wherever you want. I have mine docked alongside the main 'Toolbox' panel for easy access.

Default snippets 

This shows the default groups which contain numerous
useful snippets but it's easy to add you own or download
and add others from the Expression Gallery.

If you expand the groups you'll see sub-groups too. 

Hint

If you used any of your own 'custom snippets' in V4, they'll be imported into the new snippets panel in a 'Legacy' group. (Although any you downloaded and added will not).

 

Each snippet comes with a description telling you what it does, for example the "CSS Replace text with image" snippet.

Snippet description

 

As well as the name and description you see
some or all of the snippet that is inserted.

Hint

You always need to work in Code view (or the code part of Split view) when pasting  snippets

 

If you click the 'Options' tab you'll see what else is possible.

Snippet Options

 

Hint

If you want to add a new folder for your snippets, go right to the end of the list and click on the last entry (probably 'Web Slice') and then click 'New folder'.

 

 

Notice the Filter box, which allows you to filter out specific snippets

Adding new snippets or new groups of snippets is very easy. Hit the 'Add new snippet' option and you get the 'New/Modify Code Snippet Dialog.

The 'Insert/replace' option is selected by default.

Crate a new snippet

The snippet above will insert an HTML5 <header>...</header> block, with the insertion point in the middle.

Notice the 'Wrap' option to the right on 'Insert/replace'. This is a much simpler way of wrapping text than the previous V2/3/4 snippets.

Create a new wrapping snippet

The snippet above wraps the code you select (in Code view of course) with an HTML5 Microdata 'locality' item property.

<p><span itemprop="locality">WA</span></p>

And of course you can edit a snippet too. Just select an existing snippet and hit the Edit button.

Edit a snippet

 

Now that we've seen the snippet panel and how you can manage snippets, lets look at one of the more complex groups, the JQuery UI Snippets.