Upgrade your Internet Experience
Welcome Sign in
|
Microsoft.com
|
Expression Product Site
|
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

  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 Color Coding 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

Concepts

Code view toolbar
Add a temporary bookmark to code
Page view tracker