On this page you can find various interesting and usefull resources and tools.
BBcode table generator
On this page you can create bbcode based tables. A great help of you need to create bbcode posts with tables in them (make sure that the forum/blog supports table tags: [table][/table][tr][/tr][td][/td]).
Cool HTML to BBCode
This tools allows you to convert HTML to BBCode
In this section you can find various methods to implement BBCode in your project.
BBCode-Parserklasse für PHP
(German)
BBsharp
Another C# implementation
Prime Transformer
This Java library can parse and transform BBCode
On this page you can experiment with our implementation of bbcode. Write any text and bbcode you like and submit it and you will immediately be able to see the parsed version of it.
This page used the bbcode parser from www.moviecodec.com. It only supported a smaller subset of bbcode tags, so please do not be surprised if something that was shown on this site in the examples didn’t not work here. Try this online tool for a better experience.
In this section, a reference table for all of the more popular BBCode tags is provided. Some are considered to be standard and should be supported in just about any BBCode implementation. Other are less likely to be supported, but nonetheless popular (hence the reason they’ve been included here).
Name | Syntax | Purpose | Example |
Bold | [b]{text}[/b] | Makes {text} bold | |
Italic | [i]{text}[/i] | Makes {text} italic | |
Underline | [u]{text}[/u] | Underlines {text} | |
Strikethrough | [s]{text}[/s] | Create a strikethrough on {text} | |
Font-size | [size={number}]{text}[/size] [style size={number}]{text}[/style] | Changes the font-size of {text} | |
Font color | [color={color}]{text}[/color] | Changes the color of {text} | |
Center text | [center]{text}[/center] | Centers {text} on screen | |
Left align text | [left]{text}[/left] | Left aligns {text} on screen | |
Right align text | [right]{text}[/right] | Right aligns {text} on screen | |
Quote | [quote]{text}[/quote] | Creates a quotation box containing {text} | |
Quote (named) | [quote={name}]{text}[/quote] | Creates a quotation box quoting {name} as saying {text} | |
Spoiler | [spoiler]{text}[/spoiler] | Creates a spoiler section (a box) that is by default collapsed until you click a button or the box itself to expand it to show the {text} | |
Spoiler (named) | [spoiler={name}]{text}[/spoiler] | Creates a spoiler section like the tag without the name, the difference here being that the indicated name is shown which can be used to headline spoiler. | |
Link | [url]{url}[/url] | Makes a link to {url} | |
Link (named) | [url={url}]{text}[/url] | Makes a named link to {url} | |
Image | [img]{url}[/img] | Shows the image indicated by {url} | |
Image (resized) | Full version: [img width={width} height={height} ...]{url}[/img] Another variant (shorthand): [img={width}x{height}]{url}[/img] | Shows {url} image resized to {width} and {height} | |
List | Unordered list: [ul]{items}[/ul] | Displays a list of {items} | |
List item | [li]{text}[/li] | Specifies an {item} within a list | |
Code | [code]{text}[/code] | Meant for rendering code snippets | |
Code (language specific) | [code={language}]{text}[/code] | Like the regular [code] tag it is used to render a snippet of code, but with this variant is possible to indicate which language is used so it can do proper synatx highlighting. | N/A |
Preformatted | [pre]{text}[/pre] | Renders the {text} while maintaing all white spacing | |
Tables | [table]{rows}[/table] | Show a table with {rows} in it | |
Table rows | [tr]{cells}[/tr] | Renders a table row containing {cells} | |
Table content cells | Heading cell: [th]{content}[/th] | Shows {content} in a table (heading) cell | |
Youtube videos | [youtube]{id}[/youtube] | Shows the youtube video indicated by {id} |
Go to the examples section to find many examples of how you can use these tags.
If you think that some tags are missing here, please do not hesitate to contact us!
This example shows you can post youtube and google videos on a website using the [youtube] and [gvideo] tags.
To find out more about the bbcode tags used on this page, please go to the bbcode tags reference page.
Including a youtube video
[youtube]E7d-3-uXlZM[/youtube]
E7d-3-uXlZM is the id of the video, you can see it from the url on youtube
Including a youtube video
E7d-3-uXlZM is the id of the video, you can see it from the url on youtube
Remember that bbcode tags are implemented to varying degrees and that with many variations. None of this represents strict standards.
This example shows how you can get a table rendered via bbcode using the [table], [tr], [td] and [th] tags.
To find out more about the bbcode tags used on this page, please go to the bbcode tags reference page.
[table]
[tr]
[th]Name[/th]
[th]Age[/th]
[/tr]
[tr]
[td]John[/td]
[td]65[/td]
[/tr]
[tr]
[td]Gitte[/td]
[td]40[/td]
[/tr]
[tr]
[td]Sussie[/td]
[td]19[/td]
[/tr]
[/table]
| Name | Age |
|---|---|
| John | 65 |
| Gitte | 40 |
| Sussie | 19 |
Remember that bbcode tags are implemented to varying degrees and that with many variations. None of this represents strict standards.
Rendering some text while maintaining all white spacing and indentation within. Also uses a monospaced font (each character takes up the same space).
To find out more about the bbcode tags used on this page, please go to the bbcode tags reference page.
[pre] 01 andndnd. 05 andnd pic x. 05 andne pic x. [/pre]
01 andndnd. 05 andnd pic x. 05 andne pic x.
Remember that bbcode tags are implemented to varying degrees and that with many variations. None of this represents strict standards.
Rendering some text (mostly code) while maintaining all white spacing and indentation within. Also uses a monospaced font (each character takes up the same space).
To find out more about the bbcode tags used on this page, please go to the bbcode tags reference page.
[code] $b = "hello world"; echo $b; [/code]
$b = "hello world";
echo $b;
Remember that bbcode tags are implemented to varying degrees and that with many variations. None of this represents strict standards.
This example shows how to create different lists types, with some variations – using the [ol], [ul] and the [list] tags. Be aware that different bbcode implementations tend use slightly different list tags.
To find out more about the bbcode tags used on this page, please go to the bbcode tags reference page.
Ordered list:
[ol]
[li]Item one[/li]
[li]Item two[/li]
[/ol]
Unordered list:
[ul]
[li]Item one[/li]
[li]Item two[/li]
[/ul]
Another variant:
[list]
[li]Item one[/li]
[li]Item two[/li]
[/list]
Other ways of indicating list items:
[list]
[*]Here's an item
*Other item!
[/list]
Ordered list
Unordered list
Another variant
Other ways of indicating list items:
Remember that bbcode tags are implemented to varying degrees and that with many variations. None of this represents strict standards.
Using the [img] bbcode tag you can easily post images on any site that support bbcode. This page shows how.
To find out more about the bbcode tags used on this page, please go to the bbcode tags reference page.
Including an image
[img]https://www.bbcode.org/images/lubeck_small.jpg[/img]
Resizing the image
[img=100x50]https://www.bbcode.org/images/lubeck_small.jpg[/img]
Making the image clickable (in this case linking to the original image)
[url=https://www.bbcode.org/images/lubeck.jpg][img]https://www.bbcode.org/images/lubeck_small.jpg[/img][/url]
Resizing and adding meta information for the image
[img width="100" height="50" alt="Lubeck city gate" title="This is one
of the medieval city gates of
Lubeck"]https://www.bbcode.org/images/lubeck_small.jpg[/img]
Including an image
Resizing the image
Making the image clickable (in this case linking to the original image)
Resizing and adding meta information for the image
Remember that bbcode tags are implemented to varying degrees and that with many variations. None of this represents strict standards.