Format code

You can set options that affect the appearance of code in Microsoft Expression Web and other options that reformat code.

The basic formatting techniques — line breaks, white space, and indentation — make code easier to read and edit, without affecting the appearance of your web page. You can specify these settings and others in Expression Web and set the font color and size uniquely for tags, attributes, values, and scripts.

To set code viewing options

1. On the Tools menu, click Page Editor Options.

2. In the Page Editor Options dialog box, on the General tab, under Code View Options, do the following:

   Use this	To do this
   Word wrap	Wrap all lines of code to the current width of the editing window.
   Auto indent	Retain the current level of indentation when you press the ENTER or RETURN key to start a new line.
   Line numbers	Display a unique number to the left of each line of code.
   Selection margin	Add a margin to the left of the editing window which enables you to click or drag to select one or more lines of code.
   Highlight invalid HTML	Display invalid HTML in a particular color (default is red) and with a background color (default is yellow), which you can specify in the ColorCoding tab of the Page Editor Options dialog box. Tip  To display a floating window that contains more information about a particular instance of invalid or incompatible code, in Code view, point at the code that appears highlighted or underlined.
   Highlight incompatible HTML	Display a wavy underline beneath code that isn't compatible with HTML standards.

   Tip

    You can also set these options by using the Code View toolbar. For more information, see Code view toolbar.

To format code

1. On the Tools menu, click Page Editor Options.

2. In the Page Editor Options dialog box, on the Code Formatting tab, do the following:

   Use this	To do this
   Reset	To reset the options to their default values.
   Tag names are lowercase	Enter tags in lowercase instead of uppercase.
   Attribute names are lowercase	Enter attribute names in lowercase instead of uppercase.
   Attribute names are alphabetized	Enter HTML attributes in alphabetical order.
   Allow line breaks within tags	Allow line breaks to appear within tags instead of keeping a tag on one line.
   Tab size	Set the number of character spaces to indent when you press TAB in Code view and used by the Indent code formatting option.
   Indent	Set the size and unit of the left margin for nested code.
   Right margin	Sets the size of the right margin for code.
   Insert tabs as spaces	Formats tabs as spaces.
   Tags	To set options for formatting particular tags, select the tag you want to format, and then under Line Breaks and beneath the Line Breaks section, set the options you want. For example, if you want to omit the list item end tag (</li>) that normally appears after each list item, under Tags, select li, and then select Omit end tag.
   CSS	To set options for formatting particular components of CSS, select the component you want to format, and then under Formatting, set the options you want. For example, if you want a particular number of spaces to appear after the opening curly brace ({) that starts a style's declaration block, under CSS, select Opening Brace, and then specify the number of spaces you want in the Spaces after box.
   Indent properties on new lines	To indent CSS attributes that are written by Expression Web.
   Use shorthand properties when generating styles	To use shorthand CSS attributes instead of longhand. For example, with this option selected, Expression Web would define the values of the width, color and style of a border by setting only the border attribute in the style. With this option cleared, Expression Web would set an attribute and value for each border attribute.

   Note

   Some of the code formatting options you specify affect all existing pages while other options affect only new pages that you subsequently create. To reformat the code of existing pages, see the procedure "To reformat the code of an existing page."

To reformat the code of an existing page

1. Open the web page you want to reformat.

2. In the Code pane, right-click and select Reformat HTML.

To set code formatting options according to code formatting of a particular page

1. With the web page you want to base the settings on open, on the Tools menu, click Page Editor Options.

2. In the Page Editor Options dialog box, on the Code Formatting tab, click Base on current page, and then click OK.

To specify the color of code

1. On the Tools menu, click Page Editor Options.

2. In the Page Editor Options dialog box, on the Color Coding tab, do the following:

   Use this	To do this
   Code view settings	Switch to the code view settings.
   Reset Defaults	Set the options to their default values.
   Display items	Select the item you want to format.
   Item foreground, Item background, and Font style	Format the code for the item selected under Display items

To specify the font of code

1. On the Tools menu, click Page Editor Options.

2. In the Page Editor Options dialog box, on the Default Fonts tab, under Code View, set the Font and Size values.

To indent particular lines of code

1. In Code view, in your web page, put your cursor in the line of code that you want to indent or select the code that you want to indent.

2. On the Edit menu, point to Code View, and click either Increase Indent or Decrease Indent.

See also

Tasks

Add a temporary bookmark to code

Reference

Code view toolbar

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.