How To Post Code In A UBB Forum

So you've got this really nice code snippet and you've spent alot of time formatting it - everything is indented "just right". You post it in a forum and... ughh! What happened to my formatting? Why am I getting script errors?

In this article I will address the following questions:

1. How do I post code so that the indentation is preserved?
2. How do I post code so that it is not "interpreted" but merely displayed?
3. How do I post code so that someone else can copy it?
4. What's the easiest way to do all the above?

How To Preserve Indentation

Notice the indentation in example 1.

Example 1:

<table>
  <tr>
    <td>
      content for table cell 1
    </td>
    <td>
      content for table cell 2
    </td>
  </tr>
</table>

If you post this example in a forum that has HTML disabled you will lose all the indentation and it will be displayed like example 2.

Example 2:

<table>
<tr>
<td>
content for table cell 1
</td>
<td>
content for table cell 2
</td>
</tr>
</table>

And that's not too bad, but if you want your code to be displayed the way you typed it, then use the [CODE] UBBCode in forums that have HTML disabled. Use it as in example 3.

Example 3:

[code]
<table>
  <tr>
    <td>
      content for table cell 1
    </td>
    <td>
      content for table cell 2
    </td>
  </tr>
</table>
[/code]

Now your code will be displayed the way you typed it - with all the indentation. The [CODE] UBBCode will put a horizontal rule before and after your source-code, and indent the entire section. It will also display your code in a smaller font.

Basic Markup

Other useful UBB "markup codes" are [B] and [I]. You can use UBBCodes in any forum. You can use them within the [CODE] section, as in example 4. The font is so small that most browsers can't render anything bold but the italic renders well.

Example 4:

[code]
<table>
  <tr>
    <td>
      [B]Bold[/B] content for table cell 1
    </td>
    <td>
      [I]Italic[/I] content for table cell 2
    </td>
  </tr>
</table>
[/code]

Interpreting v/s Displaying

If we post example 1 in a forum that has HTML enabled, the code won't be displayed at all - it will be interpreted as if you wanted an HTML table to be displayed. But it will only generate errors because that is not the correct way to display an HTML table in a UBB forum. When you are at the forum's posting editor, look to the left side of the textarea to see if HTML is enabled or disabled.

Character Entity References

In the Webmastering forum, HTML is enabled. That means you can use HTML tags in your post and they will be interpreted properly as markup. So this: <b>HelpFromTechs.com</b> will display "HelpFromTechs.com" in a bold font. But how do I display that without it being interpreted as markup? The answer is, by using "HTML character entity references". In example 5, I take the source-code from example 1 and prepare it for posting in a forum that has HTML enabled.

Example 5:

[code]
<table>
  <tr>
    <td>
      content for table cell 1
    </td>
    <td>
      content for table cell 2
    </td>
  </tr>
</table>
[/code]

Example 6:

<pre>
&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;
      [B]Bold[/B] content for table cell 1
    &lt;/td&gt;
    &lt;td&gt;
      [i]Italic[/i] content for table cell 2
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>

Example 7:

<pre>
for (i = 0, b = 1; i < limit; ++i, b += 2) {
  myArray[i] = anotherArray[b];
}
</pre>

It looks like there is an "opening" italic UBBCode and an opening bold UBBCode but neither UBBCode is "closed", that is, there is no [/i] nor [/b]. But they are really just part of the source-code, they are not intended to be "markup". Entity references are a solution here as well. The character "[" is equivalent to "&#91;" and the character "]" is equivalent to "&#93;". Example 8 will now display correctly in a forum.

Example 8:

<pre>
for (i = 0, b = 1; i < limit; ++i, b += 2) {
  myArray&#91;i&#93; = anotherArray&#91;b&#93;;
}
</pre>

Use Your Own Editor!

Looks messy, eh? I usually write my post in a text editor before I paste it into the forum posting editor. When you are finished typing, look back and see if there's any html that you don't want interpreted (as HTML elements), you just want to display the html tags themselves. Also look for any occurences of "[i]" or "[b]" that you dont want interpreted (as UBBCodes). Highlight that code and do a search and replace. Replace all "<" or ">" with "&lt;" or "&gt;" respectively, and replace all "[" or "]" with "&#91;" or "&#93;" respectively, where needed. When you're finished, paste it into the forum posting editor.

After you've submitted the post, if it doesn't look correct, or if you see something you want to change, go back to the copy that's in your text editor, and make the changes there. Then click the "Edit" icon above your post in the forum. Select and delete everything in the posting editor except your signature at the bottom. Then select and copy your corrected post from the text editor and paste it into the posting editor.

Why not just edit what's in the forum posting editor? Here's why. If you had posted example 6, and went back to edit it. It would look like example 4 in the forum posting editor. All your hard work in replacing characters with entity references has been reversed! If you repost it now, you'll get errors and it will look terrible.

Editing An Existing Post

There are times when you need to edit a post and you don't have the original saved as a file that you can open with a text editor like notepad. Click the "Edit" icon above the post, then select and copy the entire post. Then paste it into a new file in your text editor. Make your changes there, before pasting it back into the forum posting editor. Sometimes it helps to view it "offline" with a browser, even though the browser won't properly interpret the UBBCodes.

Smileys In Your Code

Sometimes emoticons (graphical smileys) show up in your code after you've posted it. It looks pretty cool, but doesn't help the readability of your code. As you know, when smileys are enabled in a post, certain combinations of characters will be displayed as an emoticon. For example, ":)", ";)", ":(", ":D", and ":lol:" are just a few. Sometimes these character combinations will occur in your code. There is a checkbox beneath the forum posting editor that will disable smileys in your post.

How To Copy Code From A Post

Using the HTML <TEXTAREA> element is sometimes used to allow other people an easy way to copy code. I've experimented with textareas, and I recommend that you do NOT use them. For one reason, they almost always cause problems when you try to edit the post. Another reason is that there is a very specific way to post a textarea, and if you don't post the HTML "just right", you'll have problems that can only be corrected by a moderator or administrator.

If you select and copy a post, then paste it into a text editor, it will appear that all line-breaks have been removed - its all on one line. But a better way to copy code is to first click the "Edit" icon above the post, then select and copy what you want out of the posting editor - the original indentation will be preserved, along with line-breaks. It won't let you actually submit any changes unless you originated the post. You have to be a registered member to bring up a post in the posting editor.

Now For The Easy Way!

I've written an on-line utility called PostPrep which prepares code for posting in an HTML-enabled forum. It does everything I've discussed above (and more) - and all you have to do is paste your code in, then click a button. PostPrep will convert the appropriate characters to their entity references, preserve indentation, allow your post to "wrap" (which the PRE element will not do), add line numbers, wrap your code in a DIV and allow you to specify color and font-size, and there are other features - all of which are optional, and it can save your option settings in cookies. Come to the Webmastering Forum to try out the latest version of PostPrep.

I look forward to seeing you at the Forums!

Mike Foster