Sections, paragraphs, and newlines

To start a new section, choose the appropriate heading level from the Format menu in the toolbar.  Typically we suggest that if you need more than three or four levels of headers, you should seriously consider breaking up your article into more, less deeply-nested, articles.  You can then link those articles together [manually].

Use heading levels in decreasing order <h1> > <h2> > <h3>, without skipping levels.

Pressing the enter (or return) key on your keyboard starts a new paragraph.  If you wish to simply insert a newline, you can do so by holding down the shift key while pressing enter.

Text formatting and styles

Most formatting options that you may need are offered in the editor toolbar that appears when you enter edit mode.  The second row on the toolbar offers buttons for boldface, italic, underlining, strikethrough text, and so forth.  You can hover over the buttons with your mouse cursor to see a tooltip explaining each.

The third row offers additional formatting options.  The Style menu lets you choose among several predefined styles we frequently use.  Most of these are fairly obvious in purpose.

You should use the "Code (inline)" style for function names, variable names, and method names. Method names should have a pair of parentheses after them, like this: doSomethingUseful(). For entire lines (or multiple lines) of code, you should instead choose "Formatted" from the "Format" menu in the toolbar. See Transformations below for information on how to apply syntax highlighting.

The Format menu offers additional formatting options, including headers and the "Normal" and "Formatted" styles.  Normal is typical body text, while Formatted causes the transformation menu to come into play.

Transformations

Transformations allow you to specify a formatting technique to apply to Formatted text.  For example, consider the following code sample:

int foo(char *bar) {
  int l = strlen(bar);
  printf("Length of string %s is %d\n", bar, l);
  return l;
}

That's a pretty basic code sample, and isn't very appealing to look at.  By using the Formatted format, we can then apply a syntax highlighting transformation to it (in this case syntax.cpp for C++), resulting in:

int foo(char *bar) {
  int l = strlen(bar);
  printf("Length of string %s is %d\n", bar, l);
  return l;
}

This makes it easy to refer to, for example, the fact that line 3 of the sample uses the printf() standard C library function.

Links

You can insert links using the Insert/Edit Link tool. This calls up a dialog that provides a user interface for either manually typing in the destination for the link (whether local on MDC or on another site) or browsing or searching the site to find the article to which you wish to link.

The link editor provides the ability to easily find not only the page to which you'd like to link, but the individual section within it as well if you prefer.  It also makes it easy to insert links to images and other files.

{{Bug(322603)}}

{{Webkitbug("322603")}}

Code formatting

These are guidelines to formatting your sample code for consistency's and clarity's sake.

if (condition) {
  /* handle the condition */
} else {
  /* handle the "else" case */
}

if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
      || class.YET_ANOTHER_CONDITION ) {
  /* something */
}

var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
                           .createInstance(Components.interfaces.nsIToolkitProfileService);

<pre function="syntax.xxxx" class="deki-transform">

<pre function="syntax.xml{code:$, gutter:false}" class="deki-transform">

HTML Elements

Element names

Use the HTMLElement template, (e.g., {{HTMLElement("title")}}), which creates a link to the page for that element. If you don't want to create a link, enclose the name in angle brackets and use "Code (inline)" style (e.g., <title>).

Attribute names

Use bold face.

Attribute definitions

Use the htmlattrdef template (e.g., {{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages. (Use the htmlattrxref template (e.g., {{htmlattrxref("attr","element")}}) to reference attribute definitions.)

Attribute values

Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the type attribute of an <input> element is set to email or tel ...

Labeling attributes

Use labels like HTML5 thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.

MDC-specific

• Custom CSS classes defined for all MDC pages.
• Custom templates created for use on MDC, with explanations.
• MDC policies and guidelines:
  • If you're not sure how to name your page, see Page naming guide.
  • MDC:Disambiguation

External

• MindTouch Deki User Manual