Guidelines to the MDN editor UI - The MDN project 编辑

The WYSIWYG (what-you-see-is-what-you-get) editor for the MDN Web Docs wiki makes it easy to contribute new content. This guide shows you how to use the editor and improve your productivity. Please read and comply with the Mozilla Terms before editing or creating new pages.

The MDN style guide offers information about how to format and style the content itself, including our preferred grammar and spelling rules.

Editor UI elements

The built-in WYSIWYG editor on MDN is designed to make it as easy as possible to create, edit, and improve articles and other pages almost anywhere on the site.

Images

It's frequently useful to include images in articles. Images may be screenshots, examples of what a rendering should look like, or SVG diagrams of program flow, for example. This article describes how to use images in MDN content.

Keyboard shortcuts of the MDN editor

There are a number of convenient keyboard shortcuts available to help you avoid taking your hands off the keyboard while you work in the MDN editor UI. The shortcuts are listed for Windows and Linux; on Mac, instead of using the Control key, you can use the Command key.

Links

Links are a crucial component to any wiki, not only among many documents, but within a single document, and MDN relies heavily on them. Fortunately, links are also very easy to create, even though there are lots of ways to make them!

Redirects

Sometimes you need to have a page that redirects to another page, or to a section of another page. This article describes how to create redirects.

Source mode

MDN's editor has a prominent button that lets you switch into source editing mode. In this mode, you see the underlying HTML for the body of the article you're editing. This guide will help you understand what you can do with MDN's wiki content source editing mode, what you should do with it, and, most importantly, what not to do.

Syntax highlighting

When you add a code example to an article on MDN, it's helpful to enable syntax highlighting, to make it easy for readers to visually pick out relevant bits of the code. The syntax highlighting mode you select is also used by our live sample rendering system to determine how to use each code snippet when assembling a complete example.

Tables

Tables are a useful way to present information; this article covers how to create and maintain tables on MDN and when you should and should not use them.