Home > Articles > Web Design & Development > Microsoft Expression Studio

  • Print
  • + Share This
  • 💬 Discuss
How Do I Insert a Code Snippet into My Web Page?

How Do I Create My Own Code Snippets?

In the Snippets Panel, choose the folder that you want your new snippet to be added to. With that folder highlighted, click Options > New Snippet. Give your snippet a name and a meaningful description. For Type, choose Insert/Replace if you want your code snippet to replace any text you have selected in your web page or Wrap if you want to your snippet to be wrapped around the text you have selected. Type or paste your code snippet into the Text field, as shown in Figure 4.

Figure 4 Enter your custom code snippet into the New/Modify Code Snippet window.

If your snippet contains text that needs to change after you insert the snippet, place a pipe symbol (|) before and after the text that needs to be changed. Click OK, and your snippet will appear in the snippet list as shown in Figure 5.

Figure 5 Your custom code snippet now appears in the Snippets Panel.

You can also modify code snippets by choosing Options > Edit Snippet. However, I recommend not modifying the code snippets that are included in Expression Web. You can easily create a duplicate code snippet to work with by selecting the snippet you want to copy, choose Options > Duplicate Snippet, and then modify the copy.

What Changes Did Service Pack 2 Make to How Code Snippets Work?

Prior to SP2, code snippets were found in the Page Editor options[md]they are now located in the Snippets Panel.

If you had custom code snippets prior to installing Service Pack 2, they were stored in a file called "SnippetsCustom.xml" in:

  • Window 7 and Windows Vista: C: Users/username/AppData/Roaming/Microsoft/Expression/Web 4/Snippets/ folder
  • Windows XP: C:\Documents and Settings\username\Application Data\Microsoft\Expression\Web 4\Snippets)

The first time you start Expression Web 4 after applying Service Pack 2, they will be converted to the new format and added to the new mySnippets folder in the same location.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus