Editing MDN pages

This page describes some common tasks when editing MDN pages.

Start editing a page

• If you are not logged in to MDN, click Sign In at the top of the page, and log in using Persona (BrowserID). If necessary, create an account.
• To edit an entire page, click Edit at the top of the page. The page switches to edit mode, and shows the contents of the page inside an editor panel.
• To edit a section of a page, click Edit next to the heading of the section you want to edit. The editor panel contains only that section, with the rest of the page still read-only. Wouldn't that be nice! :-)

Save your work

The editor in MDN offers multiple ways to check and save your work.

• Save changes: Saves your changes and leaves edit mode, returning the page to reading mode. This is the same as the Save and Exit button in the editor toolbar.
• Save and keep editing: Saves your changes, remaining in edit mode. This is the same as the Save and Keep Editing button in the editor toolbar.
• Preview changes: Renders your changes in another browser tab. This view executes any templates that are referenced in the page, so that you can see how the templates will appear to readers.
• Discard changes: Throws away your changes since the last save, and returns the page to reading mode.

If you are editing a section (not the whole page), you see these buttons:

• Save: Saves your changes and returns to reading mode.
• Cancel: Discards your changes and returns to reading mode.

Modify the page info

While a page is in edit mode, you can modify some of the page metadata. Click the "i" to open the page info fields.

• Title: The title that appears in the browser title bar and at the top of the page content.
• Slug: The last part of the URL for the page. Normally, this is based on the page title (appropriate substitutions for spaces and special characters), but you can change it.
• TOC: If this box is checked, a table-of-contents is automatically generated for the page, based on the headings within the page (up to H4), in a box near the top of the page.

Any changes to these fields are saved when you save the page as a whole.

Format text

The editor offers several toolbar buttons to help with formatting text. Some of these of common to many editors and need no explanation.

• Source: Switches the editor from visual editing to HTML source editing.
• H1, H2, H3, H4, H5, H6: These buttons correspond exactly to the corresponding HTML heading elements. This is different from the previous version of the MDN editor, where pressing H1 produced <h2>, and so on. Therefore, avoid formatting with H1, as there should be only one <h1> element in a page, and for MDN, that is produced by the page title.
• PRE: Encloses the selected text in a <pre> element. Clicking this button enables the Syntax Highlighter menu next to it, which lets you select the type of code, so that syntax highlighting is applied appropriately.
• Styles: Selecting an item from this menu surrounds the selected text in a <div> (for block styles) or <span> (for inline styles) element with the corresponding class identifier. This enables the affected text to be appropriately styled by MDN's style sheets.