Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.

BBcodex

BBcode Index

The following table lists BBcode tags with a short description. The 'Block?' column indicates if the tag is a block tag, which means the enclosed text will appear separated from the surrounding text. The 'Nests?' column indicates if other BBcode tags may appear inside of this tag.

Tag Name Block? Nests? Description
[url] N N embed a clickable link
[email] N N create a clickable link for an email address
[img] N N place an image on the page
[timg] N N display an image as a enlargeable thumbnail
[video] N N embed a video in the page
[b] N Y make enclosed text bold
[s] N Y strike thru enclosed text
[u] N Y underline enclosed text
[i] N Y enclosed text is italicized
[spoiler] N Y hide text that could be considered a "spoiler"
[fixed] N Y display enclosed text in fixed-width i
[super] N Y superscript the enclosed text
[sub] N Y subscript the enclosed text
[size] N Y change size of text (allowed only in custom titles)
[color] N Y change color of text (allowed only in custom titles)
[quote] Y Y display enclosed text as a quotation block
[pre] Y Y display block of text with whitespace preserved
[code] Y N display block of text as fixed-width source code
[php] Y N display block of highlighed PHP syntax
[list] Y Y format a series of items as a bulleted list

What is BBcode?

BBcode allows you to add formatting and special items to your messages. It is similar to HTML, but has a simpler syntax and will never break the layout of the pages you are viewing. You can use BBcode in any forum. Only administrators may use HTML, so don't do that.

To use BBcode, you enclose some text within an opening tag and closing tag. The tag name indicates what is done to the text is surrounds. For example, to embed a clickable link on the page, use the [url] tag, like this...

[url]https://www.somesite.com[/url]

BBcode tags are case-insensitive. This means that [URL] and [url] and [UrL] are all considered the same. You should try to ensure the beginning and ending tags use the same case, though.

What is a fixed-width font?

This page frequently mentions "fixed-width fonts". This simply describes a font in which each character occupies the same width of space. With a fixed-width font, any two words of the same length take up the same amount of room on the page.

1) Here is some text
2) Here is some text

The first line above uses a fixed-width font. The other line is not.

URL Hyperlinks #top

Use the [url][/url] tags to create a clickable link.

Simple Form

The easiest way to use this tag is to surround the URL you wish to link to with [url][/url] tags. The URL will be shown as you typed it, but will be hyperlinked. Here are some examples:

[url]https://www.website.com/forum/[/url]
[url]https://www.foo.com/ham%20cake/[/url]
[url]www.website.com[/url]

Parameterized Form

In the above examples, the URL being linked to is displayed as the clickable text. If you'd like to link arbitrary text or an image, you can supply the URL as a parameter. In this form, whatever is inside of the tags is linked to the URL parameter. For example:

[url=https://www.somethingawful.com]Click here to visit SA[/url]
[url=https://www.foo.com][img]https://www.mysite.com/clickme.gif[/img][/url]

The first example would produce a link like this: Click here to visit SA. The second example links the enclosed image to the URL given as the parameter.

Oh, wow, are we not fancy now?

URL Tag Rules...

The use of this tag is governed by a rigid set of draconian laws:
  • URLs should begin with a scheme part such as or https:.
  • URLs may not begin with unsafe schemes. Unsafe schemes, such as javascript: and about:, are invalid.
  • URLs that have an invalid scheme automatically get // prepended.
  • URLs should not have whitespace between the address and the BBcode tag. If you need a space in a URL, encode it as '%20'.
  • URLs that are badly mangled or potentially malicious will not be parsed.

An option is also available when posting to convert untagged URLs to links. If this is checked, any plain URLs in the posted text will be wrapped in [url][/url] tags for you.

Email Address Hyperlinks #top

You can use BBcode tags to create a clickable email address link. Here is how one may wield this amazing power:

[email]myname@domain.com[/email]

You can also link arbitrary text to an email address by specifying the address as a parameter, like so:

[email=myname@domain.com]Click here to email me[/email]

This will produce a hyperlink like this: Click here to email me.

Images and Image Thumbnails #top

You can embed an image in your text using the [img] tag. Simply place the URL to the image you wish to display inside the tags, like so:

[img]https://i.somethingawful.com/foo.gif[/img]

You should only link to images hosted on webspace you control, or on a free image hosting provider. Linking to images may otherwise get you in trouble, so check the rules first.

For large images, you may want to display a thumbnail image instead of the full-sized image. You can do this with the [timg] tag, like so:

[timg]https://i.somethingawful.com/foo.gif[/timg]

The image will be shown at a scaled-down size. The user can click the image to display the full-sized version. Note that using this tag does not save bandwidth, since the full-sized image must be downloaded anyway. The resizing is just a client-side hack.

Videos #top

The [video] tag allows you to embed an html5 video in your text, provided the video is available at one of a few supported sites. The video will not start playing until the user clicks the play button. If you do not see videos in posts but would like to, enable that option on your account.

Posting a video the easy way...

The easy way to post a video is to simply post the video URL surrounded by the [video][/video] tags. Your URL will be analyzed to see if it corresponds to a supported site and URL structure. If it does, the tag will be converted to the full form (explained below). Here's an example of simple tag usage:

[video]https://www.youtube.com/watch?v=YQs8UVeczX0[/video]
[video]https://video.yahoo.com/watch/5166184/13665231[/video]
[video]https://www.cnn.com/video/#/video/crime/2009/05/28/ng.family.murder.cnn[/video]
[video]https://www.vimeo.com/11735451[/video]

Don't be surprised if you preview the post and the tag has been changed. That's on purpose, as explained below.

Posting a video the hard way...

After analysis, simple tags like those above are converted to parameterized [video] tags. The URL you provided is truncated to just the part we need to identify the requested video. This is done to hopefully make changing the URL structure for supported sites easier in the future.

If you'd rather use the full-form tag, you need to specify the site as the "type" parameter and the tags should enclose only the video identifier portion of the video URL. It can be tricky to pick this out at some sites, so usually the short-form above is faster.

YouTube
[video type="youtube"]YQs8UVeczX0[/video]
Yahoo! Video
[video type="yahoo"]5166184:13665231[/video]
CNN
[video type="cnn"]/video/crime/2009/05/28/ng.family.murder.cnn[/video]
Vimeo
[video type="vimeo"]11735451[/video]

Specifying a video start offset

Some video sites allow you to specify a point in the movie where playback should begin. All of the examples below will start playback at 3 minutes and 8 seconds into the movie (that's what the "3m8s" means).

YouTube (as a video tag parameter)
[video type="youtube" start="3m8s"]YQs8UVeczX0[/video]
YouTube (as part of video identifier)
[video type="youtube"]YQs8UVeczX0#t=3m8s[/video]
Youtube (as part of video URL)
[video]https://www.youtube.com/watch?v=YQs8UVeczX0#t=3m8s[/video]
Youtube (as part of video URL)
[video]https://www.youtube.com/watch?v=YQs8UVeczX0&start=188s[/video]

Specifying video resolution

If a video site offers high-definition video, you can request it in your bbcode video tag. Currently we support this for YouTube videos. If your tag indicates high-def video should be used, the embedded player is approximately widened to accomodate it.

YouTube HD (as a video tag parameter)
[video type="youtube" res="hd"]YQs8UVeczX0[/video]
Youtube HD (as part of video URL)
[video]https://www.youtube.com/watch?v=YQs8UVeczX0&hd=1[/video]

Where do I get video URLs?

That depends on the website. YouTube makes it rather easy. The others can be more difficult. Some sites have several different ways of presenting video, and not all of them will work. Here are suggested ways to get the URL of a video for each site supported:

YouTube
This one is easy. Just copy the URL from your browser address bar while on the page for the video you wish to embed. Alternately, YouTube has a "URL" box with the link on the right of each video when viewing its page.
Yahoo! Video
Not all videos are embeddable. Look for those with "/watch" and two numbers in the URL. If you're on a page at "/network", look for the "Video Page" link, which likely will bring you to the URL you want.
FOXNews
Not all videos are embeddable. Go to the video's page, and click the "SHARE" link in the Flash player. Click "Link to this Video" for the video URL.
CNN
There is currently no easy place to get a link to their videos. For the most part, use the address from your browser address bar for CNN videos. There are some videos hosted externally that won't work. Usually the URL ends in ".cnn".
Vimeo
You should be able to just copy and paste the URL from your browser address bar while on the page of the video you want to embed.

Text Formatting #top

Use the tags below to apply formatting to the text they enclose:

[b]some text[/b]
« produces 'some text'
[u]some text[/u]
« produces 'some text'
[i]some text[/i]
« produces 'some text'
[s]some text[/s]
« produces 'some text'
some text[super]2[/super]
« produces 'some text2'
some text[sub]3[/sub]
« produces 'some text3'
[fixed]$ENV{'foo'}[/fixed]
« produces '$ENV{'foo'}'

Keyboard Shortcuts #top

Use the following keyboard shortcuts to make typing posts easier:

ctrl+b
produces bold text
ctrl+i
produces italic text
ctrl+u
produces underlined text
ctrl+s
produces strikethrough text
ctrl+p
produces [spoiler] tags
ctrl+l
produces [list] tags
ctrl+q
produces [quote] tags

Spoilers #top

What is a spoiler? A spoiler is a comment that, when disclosed, would ruin an otherwise pleasant surprise, such as the ending to a movie or how to defeat Ganon at the end of Zelda. If something you are about to post could ruin something for other people, enclose it in [/spoiler] tags!

Spoiler tags hide the text they surround by displaying a black box where the text would otherwise appear. To view the spoiler-tagged text, move your mouse over it. Here's an example of how to use this tag:

hey guess what [spoiler]the butler did it[/spoiler].

This BBcode will produce the following result...

hey guess what the butler did it.

To view what the spoiler hides, move your mouse over the blacked-out text.

Color and Size #top

There are tags for [color] and [size], but they are only useable in custom user titles or where otherwise specified. People tend to abuse these tags, so they are not allowed in most places.

To use the [color] tag, you specify the desired color as its parameter and then surround the text you wish to colorize. The color parameter may be specified as a hexadecimal value or as a named color. The named colors which are supported are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. For example:

[color="aqua"]some text[/color]
[color="#cccccc"]more stuff[/color]

To use the [size] tag, you specify the desired size as its parameter and then surround the text you wish to resize. The sizes supported are 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', and 'xx-large'.

[size="x-large"]some text[/size]

Again, these tags are only available when buying a custom title or where otherwise specifally stated.

Quote Blocks #top

To quote something that has already been posted, simply cut-and-paste the text you want to quote, and enclose it as follows:

[quote]
No. Try not.
Do or do not, there is no try.
[/quote]

The tags will automatically indent the enclosed text and format it in a pleasing manner.

You can also supply a name to attribute the quote to as a parameter. Here's an example:

[quote="Yoda"] No. Try not.
Do or do not, there is no try.
[/quote]

You will see this latter form in use when using the "Quote" button to quote a post in a thread you are viewing.

Lists #top

You can create bulleted or ordered lists in the following way:

Unordered, bulleted list:

[list]
[*]first bulleted item
[*]second bulleted item
[/list]

This produces:

  • first bulleted item
  • second bulleted item

Note that you must remember to close the list with the [/list] tag.

If you would like to create a list ordered numerically or alphabetically, this is just as easy. You simply need to add a little extra code to your [list] and [/list] tags. The extra code looks like =1 (for a numbered list) or =A (for a list from A to Z). Here are some examples:

[list=1]
[*]this is the first numbered item
[*]this is the second numbered item
[/list=1]

This produces:

  1. this is the first numbered item
  2. this is the second numbered item
[list=A]
[*]this is the first alphabetically ordered item
[*]this is the second alphabetically ordered item
[/list=A]

This produces:

  1. this is the first alphabetically ordered item
  2. this is the second alphabetically ordered item

Remember that if the list tag is parameterized, both the opening and closing tag must have the parameter. Weird, I know.

Preserving Whitespace #top

Occasionally it is useful to post some text and have the whitespace preserved. You can do this with the [pre] tag. This tag is a block tag, meaning it will be separated from the surrounding text and get special formatting.

You may include other BBcode tags inside of the [pre] tags. Smilies are NOT parsed, however. This is so they do not interfere with the formatted text inside the tags.

[pre]
[i]Name[/i]    Booble
[i]Age[/i]     47
[i]Color[/i]   Purple
[i]Symbol[/i]  (: :)
[/pre]

The space between the columns is preserved, and the text is shown in a fixed-width font. The code above would produce:

pre:
Name    Booble
Age     47
Color   Purple
Symbol  (: :)

Notice also that the "(: :)" is not parsed as two smilies, but displayed as-is.

For more specialized block formatting, check out the [code] and [php] tags described below.

Displaying Source Code #top

If you want to post some programming source code, you probably want to display it in a fixed-width font. You can do this with the [code] tag. If the code you are posting is PHP, you can use the [php] tag, which adds fancy syntax highlighting and PHP-style delimiters.

Text inside these tags is not parsed for BBcode or smilies; it is displayed as-is. Whitespace inside the tags is preserved as well.

Both of these tags are block tags, meaning they are separated from the rest of the text and have special formatting applied. Remember that for displaying text inline with a fixed-width font, you can use the [fixed] tag!

You may be wondering how these tags differ from the [pre] tag described above. The one important difference is that any BBcode tags encountered inside [code] and [php] are NOT rendered, as described above.

[code]

  package My::Buns;

  sub create_bun {
    return bless {}, $_[0];
  }

  1;

[/code]

The code will be displayed exactly as it is entered, but in a fixed-width font.

code:

  package My::Buns;

  sub create_bun {
    return bless {}, $_[0];
  }

  1;
		

The [php] tag works very similiarly, for example...

[php]

   = "globals rule!";
  echo preg_replace("/[A-Z]/", "?", );
  exit;

[/php]

This code would produce the following:

php:
<?
 
   "globals rule!";
  echo preg_replace("/[A-Z]/""?");
  exit;
 
?>