Basic

The Basics of BBCode

BBCode Wikipedia page

BBCode is a simple way to format text, often used in forums and other places where people may not know how to write HTML. For the most part, I've tried to keep everything standard BBCode with some additions to make formatting easier for non-programmers.

What is a tag?

A tag tells the program that converts the BBCode into browser readable HTML how to format text, and what exactly to format. A tag always is surrounded by brackets and has something inside (ex: [b]). Of course you also have to express when you want that effect to stop, so you have to add an ending tag. An ending tag is almost exactly like a normal tag, except the insides start with a forward slash (ex: [/b]).

What's actually inside of the tag is what text to format. If you were to do [bold]Hello[/bold] then you would get "Hello" and if you do [bold]Hello[/bold], my name is James then you get "Hello, my name is James".

###Parameters Some tags take in values in the tags that allows you to do fancy stuff with with your text, but the end tag is always the same. There are two ways that tags take in values: a starting parameter, and additional parameters. A starting parameter takes the form of tag=value with the tag determining what the value is used for (Ex: [url=http://google.com]Google[/url] will produce Google). Look in a tag's page to see if a starting parameter is allowed and what it does.

An additional parameter(s) takes the form of info=value and must always have a space in front of it. (Ex: [font variant=upper]hello[/font] will produce HELLO). What parameters are available is said in the tag's page.

Some tags can take in multiple values with multiple parameters. Probably the tag with the most available parameters is the [img] tag. You can do something complex like [img=500x20 alt="Hello" title="A Picture"]An image URL[/img].

Tag support

BBConvert has support for all of the following tags and parameters:

[b]Some Text[/b] //bolded text
[bold]Some Text[/bold] //bolded text
[i]Some Text[/i] //italicized text
[italics]Some Text[/italics] //italicized text
[u]Some Text[/u] //underlined text
[underline]Some Text[/underline] //underlined text
[s]some Text[/s] //strikedthrough text
[strike]Some Text[/strike] //strikethrough text
[font=Verdana]Some Text[/font] //text in verdana font
[font size=20pt]Some Text[/font] //20pt size text
[font color=red]Some Text[/font] //red text
[font color=#000000]Some Text[/font] //text with the color of #000000. The # is unnecessary
[font variant=upper]Some Text[/font] //uppercased text
[font variant=lower]Some Text[/font] //lowercase text
[font variant=smallcaps]Some Text[/font] //smallcaps text
[size=20pt]Some Text[/size] //20pt size text
[color=red]Some Text[/color] //red text
[color=#000000]Some Text[/color] //text with the color of #000000. The # is unnecessary
[smallcaps]Some Text[/smallcaps] //smallcaps text
[url]Link address[/url] //linked text
[url=address]Some Text[/url] //linked text
[url title="Title"]Link address[/url] //linked text with title
[link]Link address[/link] //linked text
[link=address]Some Text[/link] //linked text
[link title="Title"]Link address[/link] //linked text with title
[youtube]Youtube URL or video ID[/youtube] //youtube video
[youtube height=200 width=500]Youtube URL or video ID[/youtube] //youtube video with set size
[youtube=500x200]Youtube URL or video ID[/youtube] //youtube video with set size
[youtube left]Youtube URL or video ID[/youtube] //youtube video floated left
[youtube right]Youtube URL or video ID[/youtube] //youtube video floated right
[img]Image URL[/img] //an image
[img=500x200]Image URL[/img] //an image with set size
[img height=200 width=500]Image URL[/img] //an image with set size
[img left]Image URL[/img] //an image floated left
[img right]Image URL[/img] //an image floated right
[img alt="Alternate text"]Image URL[/img] //an image with alternate text
[img title="Title"]Image URL[/img] //an image with title
[image]Image URL[/image] //same as [img] tag
[title]Some Text[/title] //Large text made for use as a title
[t1]Some Text[/t1] //Large text made for use as a title. Same as [title]
[t2]Some Text[/t2] //Slightly smaller text than [t1]. Meant for use as a title of some sort
[t3]Some Text[/t3] //Slightly smaller text than [t2]. Meant for use as a title of some sort
[t4]Some Text[/t4] //Slightly smaller text than [t3]. Meant for use as a title of some sort
[t5]Some Text[/t5] //Slightly smaller text than [t4]. Meant for use as a title of some sort
[t6]Some Text[/t6] //Slightly smaller text than [t5]. Meant for use as a title of some sort
[align=center]Some Text[/align] //Aligns the insides (encapsulates the insides in a div)
[ul]
* Item 1
Item 2
[/ul] //an unordered (bulleted) list
[ol]
* Item 1
Item 2
[/ol] //an ordered (numbered) list
[bullet] * Item 1 * Item 2[/bullet] //same as [ul]
[number] * Item 1 * Item 2[/number] //same as [ol]
[ul]* Item 1 * Item 2[/ul] //an unordered (bulleted) list
[ol]* Item 1 * Item 2[/ol] //an ordered (numbered) list