The Code Block (X)H.T.M.L. Markup

Creating the Markup

Essential (X.)H.T.M.L. Elements for the Code Block

We need the following (X.)H.T.M.L. markup elements, attribute and value to construct the auto-line numbered code block:

Required Markup Names and Code

Markup Names	Markup Code
End Table
ordered list element class attribute + value	<ol class="code"></ol>
list item element	<li></li>
pre element	<pre></pre>

Step by Step

1. Set up the ordered list element and list item elements.
2. Insert a pre element within each list item element.
3. Insert a single line of code between the opening and closing pre elements.
4. With your cursor placed on the beginning of the code line, press your spacebar moving the code line to the right to achieve your desired white-space indentation.
   1. This is the benefit of using the pre element. It preserves the indented white-space of each code line.
5. Repeat this series of actions for each line of code in the code block.

It doesn't matter how many lines of code you want to render in the block. The ordered list will automatically number each code line in sequence as you add it in a new <li> and accompanying <pre> element. Conversely, if you need to reduce or remove lines of code in the block for any reason, the ordered list will automatically reduce the sequential numbering of the remaining lines.

Example markup written in a text editor:

Important Note: if you need to break a long string of code, please follow the instructions below:

• Make sure that you use a natural code break in the string and that it is syntactically correct according to the programming language you're illustrating.
  • Don't sacrifice correct code syntax for the sake of appearance.
  • If you break the code string incorrectly:
    • a novice programmer won't know why the supposedly correct example you provided doesn't work
    • an experienced programmer may become frustrated while debugging your error
• If the break in the code is correct, then create a new <li><pre></pre></li> sequence on the next line of your text editor:
  • Insert the remaining part of the code string (continued code from previous line).
  • Indent the continued code line to nest beneath the original portion of the code string.
• Do this as many times as needed if the code string is particularly long.
• Remember, the pre element will preserve the white-space you create when writing the markup for the code.

1. <ol class="code">

2. <li><pre>code line</pre></li>

3. <li><pre>  code line</pre></li>

4. <li><pre>    code line</pre></li>

5. <li><pre>      start of one line of code(natural code break)</pre></li>

6. <li><pre>        continued code from previous line(natural code break)</pre></li>

7. <li><pre>        continued code from previous line(natural code break)</pre></li>

8. <li><pre>        continued code from previous lineend of one line of code</pre></li>

9. <li><pre>      code line</pre></li>

10. <li><pre>   code line</pre></li>

11. <li><pre>code line</pre></li>

12. </ol>

Example browser rendering of the previous markup, including line numbers:

1. codeline

2.   codeline

3.     codeline

4.       codeline code code code code

5.         continued code from previous line

6.         continued code from previous line

7.         continued code from previous line

8.     codeline

9.   codeline

10. codeline

Note that the first and last lines of code from the text editor example do not show in the rendered browser result shown above.

• This is because the <ol class="code"></ol> element does not need to be depicted in the rendered result.
• By not enclosing the <ol></ol> element in the <li><pre></pre></li> wrapper, it does not render in the browser code block.
• However, if we do want to render the <ol></ol> element at the beginning and end of the code block, then wrap it like this:

• <li><pre><ol class="code"></pre></li> (beginning of code block)
• codelines............................. (intervening lines of code)
• <li><pre></ol></pre></li> (end of code block)

top