DKPSystem.com - BBCode Guide

BBCode Guide

View Version History

Contents:

Intro to BBCode

BBCode is a type of markup language written to simplify formatting on posts. It replaces and simplifies HTML, ultimately making it easier for non-coders to format their posts exactly as they'd like.

They are done by typing enclosing the tag information inside square-brackets ( [ and ] ). For example [b] is the tag for bolding something.

Non-BBCode Filters

DKPSystem.com employs a number of non-BBCode filters to quickly accommodate posters.

Posting a URL will convert it to a link

Posting a Image URL (one that ends with .gif, .jpg, .jpeg, or .png will convert to an embedded image)

Posting a Youtube.com or Google Video URL will be converted to an embedded video

There's one last encoding for accommodating someone who is trying to TELL someone how to use BBCode, and it's {{ and }} will automatically be converted to [ and ] respectively. This allows you post BBCode that won't get rendered.

Built-in BBCode Tags

Simple Tags

Bold: [b]this text is bold[/b]

Italics: [i]this text is italics[/i]

Underline: [u]this text is underlined[/u]

Strike-through: [strike]this text is striken[/strike]

Tab: [tab] will simply insert a tab space, allowing indentation for a single line

Indent: [indent]will indent this entire block[/indent]

Colors: [red]this text is red[/red], [blue]this text is blue[/blue], [#f36f6d8]this text is the color [/#f36f6d8]

Size: [size=12]This text is 12-point font[/size], [size=24]this text is 24-point font[/size}

Spoiler: [spoiler]here is some spoiler text[/spoiler]

Example: Here is a Star Wars spoiler: (click to show spoiler)

Not Safe For Work: [nsfw]this is something that is not safe for work, such as an explict picture[/nsfw]

Quoting: (there are three ways to quote)

[quote]This is the basic quote option[/quote]

[quote=Joe Blow]This is a quote by Joe Blow website member[/quote]

[quote=Web Address]This is a quote from the website specified in "Web Address"[/quote]

Item links: [item]Azuresong Mageblade[/item]

You can also specify item links for other games, by doing the following:

[item=game]Other Item[/item]

For example: [item=war]Warlord Platecoat[/item] will make a Warhammer Online item link.

Collapse: [collapse=Collapse Title]Content of the Collapsed information[/collapse]

Example: Click here to expose the Collapsed info

Hover: [hover=Link Text]Text inside the hover[/hover]

Example: Hover over me

Tables

[table]
[row]
[cell]Apples[/cell]
[cell]Oranges[/cell]
[cell=1,2]Grapes[/cell}
[/row]
[row]
[cell=2,1]Pears[/cell]
[/row]
[/table]

Produces the following table:

Apples	Oranges	Grapes
Pears

Note: When using [cell=x,y], note that x is the number of cells to span, and y is the number of rows to span

Lists

Ordered List

[o]
[li]Apples[/li]
[li]Oranges[/li]
[/ol]

Produces the following list:

Apples
Oranges

Bulleted List

[ul]
[li]Apples[/li]
[li]Oranges[/li]
[/ul]

Produces the following:

Apples
Oranges

Community Editing

There is also functionality to arbitrarily choose others who will be allowed to edit parts of your post. This is done as follows:

[commedit]others may edit this text[/commedit]

Inter-guide linking

If the following formats are used on Guides, they will create (if necessary) and link to the new sub-guide. If they are used in forum posts or other "non-guides", they will simply link to the guide, if it exists.

[guide=warlockguide]The Warlock Guide[/guide] (links to the Guide with the "Easy Link Text" of "warlockguide")

[guide]Warlock Guide[/guide] (will try to find the appropriate guide to link to and change it accordingly)

Images, Links, and Flash

Note: No tags are required for images and links. If you post a URL it'll make a link out of it by default. If it ends with .gif, .jpg, .jpeg, or .png it'll insert it as an image

Links: [url=http://google.com]Google[/url]

Images: [img]http://blah.com/image.jpg[/img]

Images with a Width: [img=width]http://blah.com/image.jpg[/img]

Images with Height and Width: [img=width,height]http://blah.com/image.jpg[/img]

Flash: [flash=width,height]http://some.address/flash.swf[/flash]

Custom BBCode Tag Creation

You can create custom BBCode Tags and Filters on your site. You start by going to Admin > Forum > Custom BBCode, and click "Add New BBCode".

They rely on Perl Regular Expressions.

Simple Example

Let's say you wanted to make a simple profanity filter.

You'd enter the following into the Regular Expressions and the Replacement Text:

Advanced Examples

Let's create a "Craigslist" tag that will automatically redirect to the relevant craigslist location. The syntax will work like this: [craigslist=town]Search query[/craigslist]

Enter it like the following:

Last Modified: 9/9/2008 9:58pm
Contributors: Chops

Easy Link
BBCode Link: [guide=bbcodeguide]BBCode Guide[/guide]
URL: http://www.dkpsystem.com/guide/bbcodeguide

BBCode Guide

[title]Intro to BBCode[/title]

BBCode is a type of markup language written to simplify formatting on posts.  It replaces and simplifies HTML, ultimately making it easier for non-coders to format their posts exactly as they'd like.

They are done by typing enclosing the tag information inside square-brackets ( [ and ] ).  For example {{b}} is the tag for bolding something.

[title]Non-BBCode Filters[/title]

DKPSystem.com employs a number of non-BBCode filters to quickly accommodate posters.

[li]Posting a URL will convert it to a link[/li]
[li]Posting a Image URL (one that ends with .gif, .jpg, .jpeg, or .png will convert to an embedded image)[/li]
[li]Posting a Youtube.com or Google Video URL will be converted to an embedded video[/li]

There's one last encoding for accommodating someone who is trying to TELL someone how to use BBCode, and it's [code]\{\{[/code] and [code]\}\}[/code] will automatically be converted to [code][[/code] and [code]][/code] respectively.  This allows you post BBCode that won't get rendered.

[title]Built-in BBCode Tags[/title]

[subtitle]Simple Tags[/subtitle]

[b]Bold[/b]: [code]{{b}}this text is bold{{/b}}[/code]

[b]Italics[/b]: [code]{{i}}this text is italics{{/i}}[/code]

[b]Underline[/b]: [code]{{u}}this text is underlined{{/u}}[/code]

[b]Strike-through[/b]: [code]{{strike}}this text is striken{{/strike}}[/code]

[b]Tab[/b]: [code]{{tab}}[/code] will simply insert a tab space, allowing indentation for a single line

[b]Indent[/b]: [code]{{indent}}will indent this entire block{{/indent}}[/code]

[b]Colors[/b]: [code]{{red}}this text is red{{/red}}, {{blue}}this text is blue{{/blue}}, {{#f36f6d8}}this text is the color {{/#f36f6d8}}[/code]

[b]Size[/b]: [code]{{size=12}}This text is 12-point font{{/size}}, {{size=24}}this text is 24-point font{{/size}[/code]

[b]Spoiler[/b]: [code]{{spoiler}}here is some spoiler text{{/spoiler}}[/code]

Example: Here is a Star Wars spoiler: [spoiler]Darth Vader is Luke's Father[/spoiler]

[b]Not Safe For Work[/b]: [code]{{nsfw}}this is something that is not safe for work, such as an explict picture{{/nsfw}}[/code]

[b]Quoting[/b]: (there are three ways to quote)

[code]{{quote}}This is the basic quote option{{/quote}}

{{quote=Joe Blow}}This is a quote by Joe Blow website member{{/quote}}

{{quote=Web Address}}This is a quote from the website specified in "Web Address"{{/quote}}[/code]

[b]Item links[/b]: [code]{{item}}Azuresong Mageblade{{/item}}[/code]

You can also specify item links for other games, by doing the following:

[code]{{item=game}}Other Item{{/item}}[/code]

For example: [code]{{item=war}}Warlord Platecoat{{/item}}[/code] will make a Warhammer Online item link.

[b]Collapse[/b]: [code]{{collapse=Collapse Title}}Content of the Collapsed information{{/collapse}}[/code]

Example: [collapse=Click here to expose the Collapsed info]Congrats, you've exposed the otherwise hidden information[/collapse]

[b]Hover[/b]: [code]{{hover=Link Text}}Text inside the hover{{/hover}}[/code]

Example: [hover=Hover over me]This is some information[/hover]

[subtitle]Tables[/subtitle]

[code]{{table}}
{{row}}
{{cell}}Apples{{/cell}}
{{cell}}Oranges{{/cell}}
{{cell=1,2}}Grapes{{/cell}
{{/row}}
{{row}}
{{cell=2,1}}Pears{{/cell}}
{{/row}}
{{/table}}[/code]

Produces the following table:
[table]
[row]
[cell]Apples[/cell]
[cell]Oranges[/cell]
[cell=1,2]Grapes[/cell]
[/row]
[row]
[cell=2,1]Pears[/cell]
[/row]
[/table]

[b]Note[/b]: When using [cell=x,y], note that x is the number of cells to span, and y is the number of rows to span

[subtitle]Lists[/subtitle]

[b]Ordered List[/b]

[code]{{o}}
{{li}}Apples{{/li}}
{{li}}Oranges{{/li}}
{{/ol}}[/code]

Produces the following list:
[ol]
[li]Apples[/li]
[li]Oranges[/li]
[/ol]

[b]Bulleted List[/b]

[code]{{ul}}
{{li}}Apples{{/li}}
{{li}}Oranges{{/li}}
{{/ul}}[/code]

Produces the following:
[ul]
[li]Apples[/li]
[li]Oranges[/li]
[/ul]

[subtitle]Community Editing[/subtitle]

There is also functionality to arbitrarily choose others who will be allowed to edit parts of your post. This is done as follows:

[code]{{commedit}}others may edit this text{{/commedit}}[/code]

[subtitle]Inter-guide linking[/subtitle]

[code]{{guide=warlockguide}}The Warlock Guide{{/guide}}[/code] (links to the Guide with the "Easy Link Text" of "warlockguide")
[code]
{{guide}}Warlock Guide{{/guide}}[/code] (will try to find the appropriate guide to link to and change it accordingly)

[subtitle]Images, Links, and Flash[/subtitle]

[b]Note[/b]: No tags are required for images and links. If you post a URL it'll make a link out of it by default. If it ends with .gif, .jpg, .jpeg, or .png it'll insert it as an image
[code]
[b]Links[/b]: {{url=http:[i][/i]//google.com}}Google{{/url}}

[b]Images[/b]: {{img}}http:[i][/i]//blah.com/image.jpg{{/img}}

[b]Images with a Width[/b]: {{img=width}}http:[i][/i]//blah.com/image.jpg{{/img}}

[b]Images with Height and Width[/b]: {{img=width,height}}http:[i][/i]//blah.com/image.jpg{{/img}}

[b]Flash[/b]: {{flash=width,height}}http:[i][/i]//some.address/flash.swf{{/flash}}[/code]

[title]Custom BBCode Tag Creation[/title]

You can create custom BBCode Tags and Filters on your site.  You start by going to [b]Admin > Forum > Custom BBCode[/b], and click "Add New BBCode".

They rely on [url=http://www.perl.com/doc/manual/html/pod/perlre.html]Perl Regular Expressions[/url].

[subtitle]Simple Example[/subtitle]

Let's say you wanted to make a simple profanity filter.

You'd enter the following into the Regular Expressions and the Replacement Text:

http://dkpfiles.com/www/files/profanity.png

[subtitle]Advanced Examples[/subtitle]

Let's create a "Craigslist" tag that will automatically redirect to the relevant  craigslist location.  The syntax will work like this:  [craigslist=town]Search query[/craigslist]

Enter it like the following:

http://dkpfiles.com/www/files/cl.png

Login:
Password: