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.
Note
When you open a page with existing code, Expression Web preserves the code formatting of that page by default. The settings on the Code Formatting tab of the Page Editor Options dialog box apply only to new web pages that you create and to content that you add or edit.
To set code viewing options
On the Tools menu, click Page Editor Options.
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.
TipTo 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
On the Tools menu, click Page Editor Options.
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
Open the web page you want to reformat.
In the Code pane, right-click and select Reformat HTML.
To set code formatting options according to code formatting of a particular page
With the web page you want to base the settings on open, on the Tools menu, click Page Editor Options.
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
On the Tools menu, click Page Editor Options.
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
On the Tools menu, click Page Editor Options.
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
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.
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
Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.