Wednesday, March 2, 2005

Crash course in BBCode

I'm sure more than a few of you have wondered, "WTF is up with all this BBCode shiznit? OMGWTFLOLBBQ!!!!!11!!1!1one". Well, I'm here to explain as best I can.

In short, BBCode is a pseudo-mark-up language very similar to HTML that you can use to make text bold, post working links, format your text, etc.

Read on for more.

Q: If BBCode is like HTML, why not just use HTML?
A: That's a valid question. And it comes with just as valid an answer: Since the rest of this website is also shown with HTML, Joe User, who thinks he knows what he's doing, enters a comment or a blog post, or whatever, with some HTML in it. But Joe didn't close one of his tags. That could potentially screw up the rendering of the rest of the page and nobody wants that.

Not allowing actual HTML in user-contributed content also prevents the malicious use of the <script> tag in cross-site scripting attacks.

Q: Ok, I get it. How do I use it?
A: BBCode is very similar to HTML, but instead of surrounding your tags with < and >, you're going to use [ and ] (square brackets). Let's go through the tags together so you can see what they all do. For display purposes, I'm going to use <> instead of [], because [] would actually get interpreted as BBCode.

<align=left>This text is aligned left</align>
This text is aligned left

<align=center>This text is aligned center</align>
This text is aligned center

<align=right>This text is aligned right</align>
This text is aligned right

The word <b>bold</b> will appear bold.
The word bold will appear bold.

<bg=red>This line's background will be red</bg>
This line's background will be red
<bg=#ccddee>This line's background will be some other colour.</bg>
This line's background will be some other colour.

The code tag will cause whitespace not to be ignored, so you can format things with spaces.
for( i=0; i<5; i++ )
// This is code.
// Whitespace is not ignored.

<color=red>This text will be red.</color>
This text will be red.

Email and MailTo
<>Link Text</email>
Link Text

<i>This text will be in italics.</i>
This text will be in italics.

Image and img

Link and URL
<link=>Link Text</link>
Link Text

<quote>This text will be quoted</quote>
This text will be quoted


<size=9>Size = 9</size>
Size = 9
<size=10>Size = 10</size>
Size = 10
<size=11>Size = 11</size>
Size = 11


No comments: