In documentation, mark a block of code such as a lengthy command or a code example to distinguish it from standard text. To express code examples in HTML, use the <pre> element. In Markdown, use a code fence (```).

This page explains how to format code examples in documentation. For more information about other code-related documentation, see Code in text, Placeholders, and Command-line syntax.

For more information about adding code blocks in the Gutenberg block editor, see Code block and Preformatted block.

General guidelines for code examples #General guidelines for code examples

• Use spaces to indent code. Don’t use tabs unless specified.
• Follow the indentation standards in the relevant coding standards guide.
• Wrap lines after 80 characters.
• Mark code blocks as preformatted text. In HTML, use a <pre> element; in Markdown, indent every line of the code block by four spaces.

For more information see Coding standards.

Example

<pre class="example">
function longSentence() {
  alert('This example of a sentence is very long and wraps onto a second
    line.');
}
</pre>

function longSentence() {
  alert('This example of a sentence is very long and wraps onto a second
    line.');
}

Top ↑

Introductory sentences #Introductory sentences

In most cases, introduce a code example with an introductory sentence that initiates the example that follows. If the heading of the content explains what the code example is about, and no additional context is required, then don’t include an introductory statement. You can introduce a code example with an imperative statement.

The introductory sentence can end with a colon or a period. Use a period if the introductory content is extended, and a colon if the introductory statement is shorter and immediately precedes the code example. The text preceding the colon must distinctly stand alone as a complete sentence. That is, don’t introduce a code example with a partial statement.

Examples

Last updated: April 8, 2021