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.