Code
This post is about how to get sample code to look right in your piece and follow site conventions. For guidance about how to use code samples to support your writing goals, see the Write useful code samples post.
All code #
Make all code samples accessible.
Inline code #
Use single backticks to switch to code font in a line of text:
The value of the `type` attribute must be valid.The value of the type attribute must be valid.
Code blocks #
Use triple backticks to create a code block.
Include the language name after the triple backticks to generate syntax highlighting:
```html
<label>Choose a preferred trait:
<select id="splinter" name="turtles">
<option value="leonardo">Leads</option>
<option value="donatello">Does machines</option>
</select>
</label>
```For code blocks that don't need syntax highlighting (for example, HTTP headers), set the language to text:
```text
Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
```For terminal commands, set the language to bash and omit leading $ signs.
Code highlighting #
Highlight lines in a code block by adding a slash and the zero-indexed line numbers after the language name. For example, here's what html/4-5 looks like:
<label>Choose a preferred trait:
<select id="splinter" name="turtles">
<option value="leonardo">Leads</option>
<option value="donatello">Does machines</option>
<option value="raphael">Is cool but rude</option>
<option value="michelangelo">Is a party dude</option>
</select>
</label>Show that lines have been removed by using a double slash. For example, here's what html//2 looks like:
<label>Choose a preferred trait:
<select id="splinter" name="turtles">
<option value="leonardo">Leads</option>
<option value="donatello">Does machines</option>
<option value="raphael">Is cool but rude</option>
<option value="michelangelo">Is a party dude</option>
</select>
</label>Show that lines have changed by using the pattern language/lineNumAdded/lineNumRemoved. For example, here's what html/6/5 looks like:
<label>Choose a preferred trait:
<select id="splinter" name="turtles">
<option value="leonardo">Leads</option>
<option value="donatello">Does machines</option>
<option value="raphael">Is cool but rude</option>
<option value="michelangelo">Is a party dude</option>
<option value="michelangelo">Is a party animal</option>
</select>
</label>Coding Style #
Indent using two spaces.
Always use straight quotes. (Readers often copy code directly from the site, and smart quotes can break code.)
Don't
const imagemin = require(‘imagemin’);
Do
const imagemin = require('imagemin');