Template:Codebits

{{{1}}}

Code Block

{{{2}}}

Notes

{{{3}}}

Notes for Use

Use

Template name Codebits.

Used to display preformatted code lines, and to include notes. The methods used are to enclose the code blocks in either poem tags or the line-numbered version of the source tags in an attempt to regain some control over the widths of preformatted text lines. In case it is not obvious, both of these methods at the very least allow single line spacing and the wrapping of long lines: two essential factors for listing code.

The iwidth option sets the ititial width of the box, and the cwidth option sets the width of the content, when the box is open, and as a result, decides the wrapping width for long code lines within the content. This is regardless of whether the content text is surrounded with the poem tags or the line-numbered source tags, or is simply unformatted text. (See two examples below).

If contents are either an image or text in pre tags, then the open-width will extend to accommodate the contents. The use of the pre-wrap value of the CSS white-space property will in time allow the pre tags to wrap long lines, but not all browsers can use it at present.(8 Dec 2008).

Although the source tags deactivate code themselves, the poem tags need an inside set of nowiki tags for any code that would otherwise run. The example below shows how to arrange the content parameter for use with the poem tags:

{{Codebits|1=Heading|2=<poem><nowiki>Code block goes here</nowiki></poem>|3=Notes}} 

An example of the drop control's use can be seen below:

Table Code Block

Code Block

<table  style="background:lightyellow;border:1px solid gray;" cellspacing=0 cellpadding=5px align=left width=70% >

  <caption> Top Caption Goes Here </caption>

<tr style="font-weight:bold; text-align:center; background:brown; color: white;">

  <th style=" border-bottom:1.5px solid black">Heading 1</th>

  <th style=" border-bottom:1.5px solid black">Heading 2</th>

  <th style=" border-bottom:1.5px solid black">Heading 3</th>

</tr>

<tr>

  <td width=33% style="border-bottom:1px solid gray">A</td>

  <td width=33% style="border-bottom:1px solid gray">B</td>

  <td width=33% style="border-bottom:1px solid gray">C</td>

</tr>

<tr>

  <td style="border-bottom:1px solid gray">D</td>

  <td style="border-bottom:1px solid gray">E</td>

  <td style="border-bottom:1px solid gray">F</td>

</tr>

<tr>

  <td style="border-bottom:1.5px solid black">G</td>

  <td style="border-bottom:1.5px solid black">H</td>

  <td style="border-bottom:1.5px solid black">I</td>

</tr>

</table>

Notes

Copy and paste this code module into the Wiki Sandbox for an example of a colourful table.

It might be of interest to know that the source tags can color a code module, and provided the tags have attributes set for line-numbering, the long lines again will wrap. See the next example in the main text or Pre-Formatted Text for the description of the method.

Another format, that colors code, numbers the lines, and wraps any long code lines, uses the source tag extensions. The colors are selected for many languages and needs to be specified within the leading tag. Interestingly, the language can be specified as text, to take advantage of line numbering for unlisted languages. See Pre-Formatted Text for more details. The following example shows how to use the source tags for code coloring and the numbering of lines:

{{Codebits|1=Heading|2=<syntaxhighlight lang=html4strict line start=1>Code block goes here</syntaxhighlight>|3=Notes}}

The coloured code can be seen in the dropbox below:

Source Tag Code Coloring

Code Block

<table  style="background:lightyellow;border:1px solid gray;" cellspacing=0 cellpadding=5px align=left width=70% >
  <caption> Top Caption Goes Here </caption>
<tr style="font-weight:bold; text-align:center; background:brown; color: white;">
  <th style=" border-bottom:1.5px solid black">Heading 1</th>
  <th style=" border-bottom:1.5px solid black">Heading 2</th>
  <th style=" border-bottom:1.5px solid black">Heading 3</th>
</tr>
<tr>
  <td width=33% style="border-bottom:1px solid gray">A</td>
  <td width=33% style="border-bottom:1px solid gray">B</td>
  <td width=33% style="border-bottom:1px solid gray">C</td>
</tr>
<tr>
  <td style="border-bottom:1px solid gray">D</td>
  <td style="border-bottom:1px solid gray">E</td>
  <td style="border-bottom:1px solid gray">F</td>
</tr>
<tr>
  <td style="border-bottom:1.5px solid black">G</td>
  <td style="border-bottom:1.5px solid black">H</td>
  <td style="border-bottom:1.5px solid black">I</td>
</tr>
</table>

Notes

Copy and paste this code module into the Wiki Sandbox for an example of a colourful table.

It might be of interest to know that it is only with line-numbering that long lines will wrap.

. See Pre-Formatted Text for the description of the method.

Limitations

Bear in mind that the use of <pre></pre> tags might still be needed for some applications. If the block of text itself has these same tags within it, then the literals should be used to replace the ones within the text. (ie: use these instead; <pre> and </pre>). This avoids the corrupted functioning which would otherwise result. A similar method can be used to make literals for most other tags, such as nowiki, poem, and source, etc., should they ever need to be shown as inoperative text.

Parameters

Heading: 1; the top heading on the drop-box - (Arial, Bold, in 400 pixel initial width)
Content: 2; the code text entry - (Courier, 400 pixels wide, left)
Notes: 3; the notes block - (Arial, 400 pixels wide, justified)

Options

iwidth: initial width of the container,(default 300px)
cwidth: width of the open box; this sets the wrapping point for long lines. (Default 600px)
align: horizontal alignment of container (default left)