Below is an auto-generated document for the BBCodes used on my blog entries. I know it's messy but I'm lazy to make it look pretty... since it's just for my own reference =)
Tag: [nobb]
Description: Use this to disable BBcode rendering in certain context.
Note: Every valid BBcode tag enclosed inside this [nobb] tag will be ignored
BBCode example #1:
Generate HTML:
Real-time rendered result:
This is a [b]bold[/b] string
Tag: %WEBLOG%
Description: A variable that points to weblog's data folder
BBCode example #1:
Generate HTML:
Real-time rendered result:
Weblog's relative path: /weblogdata
Tag: [left]
Description: Make content align to left
Note: Usually this applies to string. To align/float an image, use the [img] tag instead.
BBCode example #1:
Generate HTML:
Real-time rendered result:
This string is left-aligned
Tag: [right]
Description: Make content align to right
Note: Usually this applies to string. To align/float an image, use the [img] tag instead.
BBCode example #1:
Generate HTML:
Real-time rendered result:
This string is right-aligned
Tag: [center]
Description: Make content centered
Note: Usually this applies to string. To center an image, use the [img] tag instead
BBCode example #1:
Generate HTML:
Real-time rendered result:
This string is centered
Tag: [b]
Description: Make a string bold
BBCode example #1:
Generate HTML:
Real-time rendered result:
This is a bold stringTag: [i]
Description: Make a string italic
BBCode example #1:
Generate HTML:
Real-time rendered result:
This is an italic stringTag: [u]
Description: Underline a string
BBCode example #1:
Generate HTML:
Real-time rendered result:
This is an underlined stringTag: [acronym]
Description: Indicate an acronym
BBCode example #1:
Generate HTML:
Real-time rendered result:
BBSTag: [s]
Description: Make a string strike through
BBCode example #1:
Generate HTML:
Real-time rendered result:
This is a strike through stringTag: [pre]
Description: Make a predefined text
BBCode example #1:
Generate HTML:
Real-time rendered result:
S p a c e s are r e serv e d
Tag: [color]
Description: Color a string
BBCode example #1:
Generate HTML:
Real-time rendered result:
Red color\n
Red colorTag: [h]
Description: Header size ( 1 - 6 )
BBCode example #1:
Generate HTML:
Real-time rendered result:
Largest header
\n
Smallest header
Tag: [size]
Description: CSS-style font size
Syntax: [size={12px|12pt|12em|12%}]string[/size]
BBCode example #1:
Generate HTML:
Real-time rendered result:
String with size 24px\n
Header with size 150%Tag: [font]
Description: Change the font family
BBCode example #1:
Generate HTML:
Real-time rendered result:
Verdana\n
ArialTag: [rainbow]
Description: Display the font in rainbow colours
Syntax: [rainbow{=BGColor}]string[/rainbow]
BBCode example #1:
Generate HTML:
Real-time rendered result:
Rainbow color power
BBCode example #2:
Generate HTML:
Real-time rendered result:
Rainbow color power
BBCode example #3:
Generate HTML:
Real-time rendered result:
Rainbow color powerTag: [email]
Description: Display email address. Email is spam proctected.
BBCode example #1:
Generate HTML:
Real-time rendered result:
BBCode example #2:
Generate HTML:
Real-time rendered result:
Tag: [img]
Description: To display an image (in many ways)
Syntax: [img(={url}|{options})]{title}[/img]
Attribute: options: left | center | right | caption | nocaption | frame | noframe | w:1px | h:1px | thumb=url | lthumb=url | link=url | llink=url | noborder | simple | longdesc
Note: Use left/right if you want to wrap text around the image. Remember to use [brb] to clear the float (no required if you center an image).
If no URL specified for thumb/lthumb, assume using default naming which appends '_thumb' at the back of filename and ends with the same file extension.
'thumb' and 'link' cannot be used together.
A frame (along with captions) will be auto added while using thumbnail. Using 'noframe' will kill the caption, thumb enlarge icon and the frame.
Image width/height are auto calculated if any is missing.
Using 'simple' will prevent <div> tags wrapping around the <img> tags, useful in some cases.
'longdesc' usage: longdesc:This is a full description to be displayed. When this attribute is specified, 'caption' will be set to ON
BBCode example #1:
Generate HTML:
Real-time rendered result:
BBCode example #2:
Generate HTML:
Real-time rendered result:
Picture height is set to 60px, with text wrap around
Picture height is set to 60px. Text will wrapped around.Text will wrapped around.Text will wrapped around.Text will wrapped around.
BBCode example #3:
Generate HTML:
Real-time rendered result:
Picture width is set to 60px, with text wrap around
Picture width is set to 60px. Text will wrapped around.Text will wrapped around.Text will wrapped around.Text will wrapped around.
BBCode example #4:
Generate HTML:
Real-time rendered result:
And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' !
Darren's Outpost
And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' ! And the winner is 'Lucky' !
BBCode example #5:
Generate HTML:
Real-time rendered result:
Full description of this image goes here. This is different from HTML img alt thing.
BBCode example #6:
Generate HTML:
Real-time rendered result:
Text will be wrapped around the image as long as you didn't clear it.Text will be wrapped around the image as long as you didn't clear it.Text will be wrapped around the image as long as you didn't clear it.Text will be wrapped around the image as long as you didn't clear it.Text will be wrapped around the image as long as you didn't clear it.Text will be wrapped around the image as long as you didn't clear it.
Ok Ok Ok Ok Ok Ok Ok Ok
Text will be wrapped around the image as long as you didn't clear it.Text will be wrapped around the image as long as you didn't clear it.Text will be wrapped around the image as long as you didn't clear it.Text will be wrapped around the image as long as you didn't clear it.Text will be wrapped around the image as long as you didn't clear it.Text will be wrapped around the image as long as you didn't clear it.
BBCode example #7:
Generate HTML:
Real-time rendered result:
Tag: [url]
Description: Display a URL link (local or external).
Syntax: [url={URL address}|{local}]{description or URL adress}[/url]
Attribute: local = if this is not specified, then it will be an external link by default
Todo: Do extra checking if this is used for public to avoid exploit
Tag: [html]
Description: Use this to insert raw html code
Note: Don't think it's a good idea for public use
Tag: [float]
Description: Use this to float one or more content to the left or right together
Syntax: [float={float type}|{css style}]{content}[/float]
Attribute: float type = [left_pad, right_pad, left, right]
Note: If you want to float an image, use [img] tag instead. Remember to use [brl] [brr] [brb] to clear the float
BBCode example #1:
Generate HTML:
Real-time rendered result:
Fruits
-----------------
Kiwi
Strawberry
Watermelon
Pawpaw
Text will be wrapped around the float content as long as you didn't clear it. You can also customize the css style.
BBCode example #2:
Generate HTML:
Real-time rendered result:
Fruits
-----------------
Kiwi
Strawberry
Watermelon
Pawpaw
Text will be wrapped around the float content as long as you didn't clear it.
BBCode example #3:
Generate HTML:
Real-time rendered result:
Floating two or more objects together in the float container. This result cannot be done via [img] using 'left' option (it will give a wierd rendering.)
Floating two or more objects together in the float container. This result cannot be done via [img] using 'right' option (it will give a wierd rendering.)
BBCode example #4:
Generate HTML:
Real-time rendered result:
Floating two or more objects together in the float container. This result cannot be done via [img] using 'left' option (it will give a wierd rendering.)Floating two or more objects together in the float container. This result cannot be done via [img] using 'right' option (it will give a wierd rendering.)
BBCode example #5:
Generate HTML:
Real-time rendered result:
*NOT RECOMMENDED* Instead, use [img] tag with 'right' option enabled. Text will be wrapped around the image as long as you didn't clear it.
BBCode example #6:
Generate HTML:
Real-time rendered result:
*NOT RECOMMENDED* Instead, use [img] tag with 'left' option enabled. You can also customize the css style. Text will be wrapped around the image as long as you didn't clear it.
Tag: [brl], [brr], [brb]
Description: Clear [left, right, both]
Note: There is no closing tag for these 3 tags.
BBCode example #1:
Generate HTML:
Real-time rendered result:
,
,
Tag: [box]
Description: Display box / container
BBCode example #1:
Generate HTML:
Real-time rendered result:
bla bla bla...
*Note* IE 7.0/Win will not render the image floating inside a box, if the content in the box is less(in height) than the picture.
BBCode example #2:
Generate HTML:
Real-time rendered result:
bla bla bla...
Same as the example above but using [img] tag with 'right' option.
Will note render properly in IE 7.0/Win too.
BBCode example #3:
Generate HTML:
Real-time rendered result:
bla bla bla...
Fruits
-----------------
Kiwi
Strawberry
Watermelon
Pawpaw
Text will be wrapped around the float content as long as you didn't clear it. You can also customize the css style.
Tag: [list]
Description: Ordered and unordered list items
Syntax: [list {ordered style}][*]list item 1[*]list item 2[*]...[/list]
Attribute: List ordered style = [1, a, i]
Note: No closing tag for [*]
Todo: Fix it so that it supports nested list
BBCode example #1:
Generate HTML:
Real-time rendered result:
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
Tag: [quote]
Description: Quote something, particularly for quoting a partial sentence
Syntax: [quote {origin}]text text text[/quote]
Attribute: origin = string
Note: Nested quote tag is allowed
BBCode example #1:
Generate HTML:
Real-time rendered result:
Quote:This is a quote from somebody.
BBCode example #2:
Generate HTML:
Real-time rendered result:
Quote (From somebody): ... bla bla bla ...
BBCode example #3:
Generate HTML:
Real-time rendered result:
Quote (Darren):This is funny... read below...
Quote (Sucker):Quote (Another sucker):Support you mate !!!
Quote (Jack):Quote (Somebody):He sucks
Hell yeah, agree !
Hell no !!!!!! You !@#$%^&*"'<>:;[]
Hahahah...
Tag: [bquote]
Description: Blockquote something, particularly for quoting a partial sentence in block
Syntax: [bquote {cite}|{description}]paragraph paragraph[/bquote]
Attribute: cite = URI, description = describe the URI
Note: If the 'cite' attribute is specify, a credit will appear below the blockquote
BBCode example #1:
Generate HTML:
Real-time rendered result:
This is a quote from somebody.
BBCode example #2:
Generate HTML:
Real-time rendered result:
This is used to enclose block quotations from other works. Both the start and end tags are required. It is often rendered indented.
Tag: [code]
Description: Display code fragment
Syntax: [code(={code_options})]{code fragment}[/code]
Attribute: code_options: title:[string] | lang:[php,css,sql...] | highlight | linenum | nojs
Note: (Deprecated) Remember to turn on the "Highlight source code" to get color highlighted syntax
Use 'nojs' option to disable javascript show/hide thing
BBCode example #1:
Generate HTML:
Real-time rendered result:
<?php
echo "Codes without show hide javascript thing !";
?>
BBCode example #2:
Generate HTML:
Real-time rendered result:
[ Hide ] <?php
echo "Hello World !";
?>
BBCode example #3:
Generate HTML:
Real-time rendered result:
Simple hello world [ Hide ] <?php
echo "Hello World !";
?>
BBCode example #4:
Generate HTML:
Real-time rendered result:
Simple hello world [ Hide ]
BBCode example #5:
Generate HTML:
Real-time rendered result:
[ Hide ] javascript:Ai7Mg6P='';for%20(i7M1bQz=0;i7M1bQz<document.images.length;i7M1bQz++){Ai7Mg6P+='<img%20src='+document.images[i7M1bQz].src+'><br>'};if(Ai7Mg6P!=''){document.write('<center>'+Ai7Mg6P+'</center>');void(document.close())}else{alert('No%20images!')} Tag: [table]
Description: Draw a table
Syntax: [table={options}]{table structure}[/table]
Attribute: options = [alternate] - for alternate row color
Note: Line break is IMPORTANT. Every line MUST start with a specific syntax {| , |} , ! , |+ , |- and |
Lines without that will be treated as a multiple lines in a cell. Nested table must have a | pipe above it.
This tag is inspired by Wikipedia pipe syntax. See http://meta.wikimedia.org/wiki/Help:Table
The code is not borrowed from Wiki, so the pipe syntax used, between this bbcode and wiki, to construct table is a (just a little) different.
BBCode example #1:
Generate HTML:
Real-time rendered result:
Table caption
|
Col Heading A |
Col Heading B |
Col Heading C |
Col Heading D |
| Row Heading 1 |
cell 1,1 |
cell 2,1
2nd line
3rd line |
cell 3,1 |
cell 4,1 |
| Row Heading 2 |
cell 1,2 |
cell 2,2 |
cell 3,2 |
cell 4,2 |
| Row Heading 3 |
cell 1,3 |
cell 2,3 |
cell 3,3 |
cell 4,3 |
| Row Heading 4 |
cell 1,4 |
cell 2,4 |
cell 3,4 |
cell 4,4 |
BBCode example #2:
Generate HTML:
Real-time rendered result:
| Column 1 |
Column 2 |
Column 3 |
| A |
B |
| C <!-- column 1 occupied by cell A --> |
D |
| E |
F |
| G <!-- column 2+3 occupied by cell F --> |
| H |
BBCode example #3:
Generate HTML:
Real-time rendered result:
| α |
cell2
|
the original table again |
BBCode example #4:
Generate HTML:
Real-time rendered result:
Multiplication table
| × |
1 |
2 |
3 |
| 1 |
1 |
2 |
3 |
| 2 |
2 |
4 |
6 |
| 3 |
3 |
6 |
9 |
| 4 |
4 |
8 |
12 |
| 5 |
5 |
10 |
15 |
BBCode example #5:
Generate HTML:
Real-time rendered result:
BBCode example #6:
Generate HTML:
Real-time rendered result:
BBCode example #7:
Generate HTML:
Real-time rendered result:
'An example table'
| First header |
Second header |
| upper left |
|
right side |
| lower left |
lower middle |
'A table in a table'
|
|
Two D's logos |
|