Chapter 34: Marking up computer code

Block with <per> and <code>

If the formatting (white space, new lines, indentation) of the code matters, use the pre element in combination with
the code element:

<pre>
 <code>
 x = 42
 if x == 42:
 print "x is … … 42"
 </code>
</pre>

You still have to escape characters with special meaning in HTML (like < with <), so for displaying a block of HTML code (<p> This is a paragraph.</p>), it could look like this:

<pre>
 <code>
 &lt;p>This is a paragraph.&lt;/p>
 </code>
</pre>

Inline with <code>

If a sentence contains computer code (for example, the name of an HTML element), use the code element to mark it
up:

<p>The <code>a</code> element creates a hyperlink.</p>

Pin It on Pinterest

Share This