BBCode Guide
Introduction
BBCode allows you to specify formatting rules for your text,
even if you are not allowed to use HTML in your posts. BBCode
originated from the forum software named PHPBB, and Drupal has a
special implementation of it.
In BBCode terms, you use "tags" to add formatting to your text. Every
tag is enclosed in [ and ]. If you want to mark some region in
your text, you need to use an opening tag and a closing tag. Closing
tags start with [/, as you will see in the examples below. If you
mistype a tag or forget to close it, you will not get the desired
formatting.
Simple text formatting
BBCode allows you to make some parts of your texts stand out from the
context by adding [b]old, [i]talic
and [u]nderlined formatting to them. The
[color] and [size] tags allow you to
change the color and size of portions of the text you enclose with
these tags. Both require a parameter (which colour or how big) that is
suffixed to the name of the tag by an equals sign (example below).
You should not repeat the parameter in the closing tag!
You can specify any recognized color name (red, blue, green, white, etc.)
or a hexadecimal color value (#CDCDCD, #FFFFFF, etc.) as the parameter of
a [color] tag. The [size] tag allows you
to set the font size between 10 and 30, 10 being the smallest size.
Note that using very large text is considered by many to be annoying, and
it is seldom a good idea to try to drive more attention to your post in
this way.
| usage | display |
| I [b]need to do[/b] this by the weekend |
I need to do this by the weekend |
| John said, that [i]we should[/i] ask her |
John said, that we should ask her |
| I [u]would not like to[/u] offend you |
I would not like to offend you |
| Jane was at [color=blue]the coast[/color] |
Jane was at the coast |
| Joe was in [color=#00FF00]the forest[/color] |
Joe was in the forest |
| You said: [size=20]HEY![/size] |
You said: HEY! |
Creating Links
You have multiple options to specify links to other destinations in
your posts.
Drupal recognizes URLs (Uniform Resource Locators) used in your posts, and
automatically replaces them with links. For URLs starting with "www" or
"ftp" (eg. www.example.com) there is no need for a protocol specification,
but you need to specify a protocol for other types of addresses
(eg. example.com).
Drupal also recognizes email addresses in posts automatically, but for compatibility
with the common BBCode implementations, also provides the [email] tag
to mark email addresses. There is no spam protection applied to the email addresses!
You can use the [url] tag with a parameter to specify a link with
meaningful text to click on. If you use the url tag without the parameter,
then the enclosed text is assumed to be an URL, and a link is created to that
destination.
| usage | display |
| For more examples, visit www.example.com |
For more examples, visit www.example.com |
| For more examples, visit http://example.com |
For more examples, visit http://example.com |
| If you have questions ask me at joe@example.com |
If you have questions ask me at joe@example.com |
| If you have questions ask me at [email]joe@example.com[/email] |
If you have questions ask me at joe@example.com |
| We use [url=http://example.com/]the example site[/url] in these examples |
We use the example site in these examples |
| We use [url]http://example.com/[/url] in these examples |
We use http://example.com/ in these examples |
Displaying images
The [img] tag allows you to display an image in your
post. You need to specify a URL to the image, so it needs to be
accessible somewhere on the internet. Beware of adding very large
images to your text, or otherwise the page will load very slowly!
If you enclose a URL in an [img] tag, then it will
be replaced with code to display the image. For example A good
screenshot: [img]http://example.com/screenshot.png[/img]
will show you the screenshot (if it exists).
You can also specify the desired display dimensions of the image by
adding a dimension parameter to the [img] tag. A
good screenshot: [img=640x480]http://example.com/screenshot.png[/img]
will display the image in 640x480 (though the full image will be
downloaded). Do not use this to show a thumbnail of an image!
You are free to link an image to an external destination by enclosing
the [img] tag with an [url] tag: See
[url=http://example.com][img]http://example.com/screenshot.png[/img][/url].
Ordered and unordered lists
The simplest list type is the unordered list, which means that there is
no numbering applied to the elements. You can make such a list by enclosing
the list elements in [list] opening and closing tags.
Specify the start of one element with the [*] list element
marker, which has no closing tag pair.
To create an ordered list, you should add a parameter to the [list]
list tag specifying what type of ordered list you would like to see.
The possible parameters are "i", "I", "1", "a", and "A" which all
correspond to the display of the first list element.
| usage | display |
I love
[list]
[*]Oranges
[*]Apples
[*]Bananas
[/list]
|
I love
|
I love
[list=I]
[*]Oranges
[*]Apples
[*]Bananas
[/list]
|
I love
- Oranges
- Apples
- Bananas
|
I love
[list=1]
[*]Oranges
[*]Apples
[*]Bananas
[/list]
|
I love
- Oranges
- Apples
- Bananas
|
Fixed-width text and block formatting
You can use the [code] tag to add an inline fixed-width
formatted part or to add a block of (usually program) code. If there is
any newline present between the opening and closing tags, then a block
will be displayed.
| usage | display |
| Edit your [code]robots.txt[/code] file |
Edit your robots.txt file |
An HTML title example:
[code]
<head>
<title>Page Title</title>
</head>
[/code]
|
An HTML title example:
<head>
<title>Page Title</title>
</head>
|
Using multiple formatting tags
You can apply more than one formatting specification to a portion of some
text. I was at [b][i]the coast[/i][/b] will be
rendered as I was at the coast for
example.
Make sure that you take care of the proper order of the opening and closing
tags. You should close the tags in the opposite order in which you opened
them. Otherwise you might get very strange rendering results. Also check
your post with the preview function before submiting it to discover possible
formatting errors due to improper BBCode usage.
There are some exceptions where you cannot add more BBCode tags. Examples
of these include the contents of the [img] tag, which by
definition should contain an URL only. BBCode tags are also disallowed
inside [code] tags, and you cannot apply some formatting
to all list items by wrapping the list with that formatting tag.
